Не описывайте стиль именем селектора
Нет
.blue-text { … }
Да
.text--highlighted { … }
На это есть две причины
- Цвет вашего сайта сайта может легко измениться. Может и не из полностью синей темы в красную, но может цветовое колесо немного сдвинется и синий станет пурпурным или серым. Вам не придется искать и заменять все селекторы где хотите заменить цвет. Или, еще хуже, вы не закончите как-то так:
.blue-text { color: red; } - Описание стиля в селекторе, делает их очень специфичными. Что если вам понадобится другой тон синего? Вы сделаете
.dark-blue-text. А затем еще.light-blue-text. И ещё один.light-blue-text-but-not-that-light... Видите? Скоро здесь будет беспорядок.
Селектор должен описывать цель/назначение, а не стиль.
Не используйте в селекторах вложенность как можно дольше
Нет
.content #intro .icon { … }
Да
.intro__icon { … }
Серьезно, вложенность это станет вашим худшим кошмаром, особенно, когда она начнет стремительно расти. Постарайтесь избегать этого.
И, кстати, НИКОГДА не используйте селекторы id. Ни их, ни !important. Никогда, никогда.
По возможности используйте селектор из одного класса
Нет
.button.active { … }
Да
.button--active { … }
Это сохранит специфичность на низком уровне и поможет избежать от использования слишком общих классов. Что, если другой разработчик добавит где-то в проекте .active { font-weight: bold; }?
Отделите селекторы от структуры HTML
Нет
.header > nav > li > button { … }
Да
.header__button { … }
Это хорошее чувство, когда вы можете изменить структуру и CSS продолжит работать...
Располагайте селекторы в том же порядке как в HTML
Нет
.footer { … }
.header { … }
Да
.header { … }
.footer { … }
Могут быть элементы с разным порядком в коде HTML/структуре DOM и где они отображаются на экране (абсолютно спозиционированные, элементы flexbox и grid). Распологайте в том же порядке в котором они идут в HTML коде, а не в том в котором они отображаются.
Располагайте селекторы по специфике
Предыдущее правило имеет исключение: когда располагаете селекторы к одному элементу.
.list-item:first-child { … }
.list-item { … }
.list-item:last-child { … }
Да
.list-item { … }
.list-item:first-child { … }
.list-item:last-child { … }
Правило CSS НИКОГДА не должно быть переопределено другим правилом расположеным до него. Помните, специфичность может стать ужасным кошмаром, расположение селекторов по специфичности помогает понять код.
Все селекторы относящиеся к странице/компоненту делайте начинающимися с одного слова...
Я использовал это правило до того, как узнал о BEM, и я думаю, что оно отлично работает в малых и средних проектах, без необходимости выполнять остальные правила BEM.
.front-page-title { … }
.intro-home { … }
.home-text { … }
Да
.home-title { … }
.home-intro { … }
.home-text { … }
... и используйте это слово как имя файла
Если вы используете CSS препроцессор, webpack loader или что-то похожее, вы скорее всего делите CSS на несколько файлов. Убедитесь, что все .home-xyz { … } селекторы находятся в home.css (или в _home.scss, без разницы).
Таким образом, зная имя класса, вы сразу поймете, какой файл искать.