Как се работи с CSS препроцесори и BEM

Списък с препоръки за улесняване на живота за вас и другите участници в проекта за оформление.

Съдържание

Sass, LESS, стилус, PostCSS.

Ако имате нещо да добавите или искате да допринесете за разработването на тези конвенции, моля, подайте проблем в GitHub или разклонете хранилището и изпратете заявка за изтегляне.

златни правила

Следвайте конвенциите, предложени тук или вашите собствени.

Има моменти, когато правилата трябва да бъдат нарушени. Причината трябва да е наистина сериозна, а не предполагаема.

  1. Целият код на проекта трябва да изглежда така, сякаш е написан от един човек, независимо от броя на разработчиците.
  2. Трябва да се направи възможно най-просто. Но не по-лесно.
  3. Всеки инструмент, ако се използва необмислено, може да ви простреля в крака.

BEM (като метод за именуване на селектора)

  • Самодокументиране.
  • Имитация на пространство от имена (простота и безопасност на модификацията).
  • Няма зависимост от DOM структурата.
  • Дизайн повторно използване на блокове.
  • Повторно използване на блокове между проекти.

Самата концепция на BEM е не само метод за именуване на селектори, но и парадигма за възприемане на проект като набор от обекти (блокове, елементи, модификатори). Пълният BEM стек е с двойно шаблониране и има относително висок входен праг. Използвайте BEM поне като начин за именуване на селектори.

Блокът е независима част от страница

  • Името на класа трябва да е просто и кратко.
  • Името на класа трябва да отговаря на въпроса "Какво е това?"
  • Не използвайте съкращения, различни от най-често срещаните
  • Иметоне трябва да отговаря на въпроса "Как изглежда?"

Блоковете могат и трябва да бъдат вложени един в друг

  • Няма ограничения за влагане на блокове, освен здравия разум.
  • Вложените блокове нямат допълнителни специфики.

Елемент - част от BEM блок

  • Името на класа се формира от името на блока с добавяне на __ и името на елемента.
  • Името на класа трябва да е просто и кратко.
  • Името на класа трябва да отговаря на въпроса "Какво е това?"
  • Избягвайте съкращенията, с изключение на най-честите.
  • Иметоне трябва да отговаря на въпроса "Как изглежда?"

Елемент може да се използва извън неговия блок само в изключителни случаи.

Елементъте част от блока, но тъй като BEM дървото е независимо от HTML дървото, елементът може да се използва и извън своя блокпри определени изключителни условия(самият блок трябва да е на страницата).

Пример: местоположението на изскачащия елемент не е вътре в родителския блок, а в самия край на DOM (за да се покаже изскачащият прозорец независимо от ограничението за видимост на родителя).

Ако използвате само BEM като метод за именуване на селектори, никога не използвайте елемент извън блок, когато пишете маркиране.

Защо просто не можете да поставите елемент извън блок по този начин:

  • логиката на маркирането се губи,
  • трудно е да се стилизират елементи, които могат да бъдат навсякъде (плаващо, абсолютно позициониране и някои други стилове на такъв елемент могат да „нарушат“ оформлението).

Елементите може да не са

Не всички блокове трябва да имат елементи: бутонът винаги е BEM блок, но BEM елементите вътре в него са относително редки.

Как да разграничим BEM блок от BEM елемент

Просто си задайте въпроса: „Това образувание ли е, което ми трябва отделно, само по себе си? Или е необходимо само вътре в своя родител?“ Ако е необходимо отделно, това е BEM блок, ако е възможенсамо вътре в родителя е BEM елемент.

В наистина съмнителни случаи изберете BEM блок.

Не забравяйте за смесването (възможността да имате на един и същ етикет както BEM класа на ниво елемент на някой родителски блок, така и вашия собствен BEM клас на ниво блок).

Във всички проекти (с изключение на много малките или тези, за които е гарантирано, че не могат да се променят) има фрагменти от дизайна, които е разумно винаги да се правят BEM блокове поради високата вероятност за повторение.

Някои дизайнерски елементи винаги са BEM блокове

  • Бутон (всеки бутон)
  • Блокове във формуляри (блок за текстово поле, блок за радио бутон и т.н.)
  • Пагинация
  • Раздели
  • Етикети (тагове)
  • Социални връзки
  • „Харесвам“ с брояч

Модификатор - допълнителен клас за промяна на външния вид или поведение

  • Името на класа се формира от името на блока/елемента с добавката -- и името на модификатора.
  • Заглавието трябва да е просто и кратко.
  • Името на класа може да отговори на въпросите „Какво е?“, „Какво се променя?“, „С какво се различава от другите?“
  • Избягвайте съкращенията, с изключение на най-честите.

Модификаторът не може да се използва самостоятелно

Клас модификатор никога не трябва да се използва сам по себе си, а винаги само с класа, който модифицира.

Смесване - комбиниране на класовете на BEM блок и BEM елемент на един таг

Комбинацията е възможна във всяка комбинация: BEM блок + BEM елемент, BEM блок + BEM блок, BEM елемент + BEM елемент. Този подход позволява:

  • Добавете някои стилови свойства, които са необходими само на мястото на добавяне (използването на модификатор е нерационално). Пример: .btn вътре в .page-header се нуждае от външенлява подложка на 37 пиксела. Можете да добавите допълнителен клас .page-header__btn към етикета с .btn и отстъп, като използвате този селектор.Това е нормална практика и може да се използва безопасно.
  • Обединете стил на 2 или повече блока. Пример: .article и .page-footer__section имат едни и същи свойства на шрифта. Можете да преместите дефиницията на свойствата на шрифта в нов .text блок и да добавите този клас към .article и .page-footer__section.Този подход ненужно свързва части от страницата(напомня на OOCSS и помощен клас), не го правете.
  • Направете без етикета за обвивка с добавения селектор. Пример: каталожна страница, 7+ продукта в поток, всеки продукт е .product, но всеки елемент от потока се нуждае от стилови свойства на клетките на мрежата (върху които е изграден изходът на потока). Можете да добавите клас клетки от мрежа към .product, за да избегнете обвиването на този клас. Това е изпълнено с конфликти на отстъпи/размери, не смесвайте класове обвивка и съдържание на един и същи етикет.

BEM блоковите класове трябва да бъдат написани първо.

Смесването леко влошава четливостта на кода и увеличава вероятността от грешка при смесване на стилове, при която пишете стилово правило в контекста на грешен селектор, където наистина е необходимо.

Един BEM блок = един файл

Във файловата система, когато работите с CSS препроцесори, всеки BEM блок трябва да бъде описан в отделен файл.

BEM дървото е плоско, за разлика от DOM

Йерархията не може да бъде записана в класове на BEM елементи (два или повече __ сегмента не са разрешени).

Sass, LESS, Stylus, PostCSS.

Организация на файловете

  • Един BEM блок = един препроцесорен файл. Винаги.
  • Файлът за стилизиране на BEM блок трябва да бъде наименуван по същия начин като самия блок.
  • Използвайте "генератори"блокове" (прост пример, по-сложен пример), за да ускорите работата.
  • Компилирайте един файл (мениджър на връзки), в който всички останали са свързани.
  • Импортирайте файлове само в мениджъра на връзки (приемливо е да импортирате миксини в отделен файл, като например mixins.scss).
  • Не пишете никакви селектори в мениджъра на връзките.
  • Не импортирайте файлове в медийни условия.
  • Един BEM блок = един препроцесорен файл.Винаги.

Влагане на селектор

  • Колкото по-малко нива на гнездене, толкова по-добре.
  • Не влагайте повече от 3 нива (псевдоелементите, псевдоселекторите и медийните условия не се считат за увеличаване на вложеността).
  • Използвайте внимателно твърдото наследяване.
  • Винаги оставяйте празен низ преди вложен селектор или @media.
  • Винаги оставяйте допълнителна вдлъбнатина за прикачени файлове.
  • Поставете @media в селекторите, а не обратното.
  • Не поставяйте @media една в друга.
  • Предпочитайте първо мобилния път, избягвайте да посочвате условието max-width @media в полза на min-width.
  • Напишете @media един до друг, не пишете селектори между тях.
  • Напишете @media условия, където използвате @media, не пишете условия в променливи.
  • Използвайте само амперсанд преди:
  • BEM разделител на елементи,
  • BEM модификатор сепаратор,
  • псевдо-елемент или псевдо-селектор.
  • Никога не използвайте амперсанд между фрази за име на блок, елемент или модификатор (вижте примера).
  • Никога не повтаряйте селектор, написан с амперсанд в същия контекст.

    • Ред на писане в контекста на селектора

    В контекста на селекторизползвайте следния ред:

    1. Правилата за стил за този селектор.
    2. @media от този контекст.
    3. Псевдоселектори и псевдоелементи.
    4. Вложени селектори на трети страни.
    5. БЕМ елементи.
    6. BEM модификатори.