Зачем нужна архитектура CSS

В CSS все правила живут в одном общем пространстве: любой селектор может задеть любой элемент страницы. На маленьком сайте это удобно. В проекте с десятками страниц и несколькими разработчиками та же свобода превращается в хаос. Архитектура CSS — это договорённости о том, как называть классы и раскладывать стили, чтобы код оставался предсказуемым.

Маленький и большой проект

Лендинг на одну страницу легко держать в голове целиком. Интернет-магазин — нет: в нём сотни компонентов, стили пишут разные люди, а код живёт годами. Каждое новое правило может случайно испортить то, что уже работает, и проверить все страницы вручную невозможно. Поэтому в больших проектах правила пишут не «как получится», а по общей системе.

Войны специфичности

Когда правило не срабатывает, проще всего сделать селектор сильнее. Потом кто-то перебивает его ещё более сильным — и так по кругу:

<style>
  .sidebar .menu a { color: steelblue; }
  .menu-link-red { color: crimson; }
</style>
 
<nav class="sidebar">
  <ul class="menu">
    <li><a href="#" class="menu-link-red">Ссылка должна быть красной</a></li>
  </ul>
</nav>

Ссылка синяя: селектор из двух классов и тега сильнее одного класса. Чтобы это исправить, придётся писать ещё длиннее или ставить !important — это и называют войной специфичности.

Конфликты имён

Два разработчика независимо придумали класс .title — один для карточки, другой для модального окна. Стили смешиваются:

<style>
  .title { font-size: 22px; color: rebeccapurple; }
  /* ...через 2000 строк, в другом файле... */
  .title { text-transform: uppercase; }
</style>
 
<h3 class="title">Заголовок карточки</h3>

Заголовок карточки внезапно стал прописным, хотя второе правило писали совсем для другого компонента.

Мёртвый CSS

Мёртвый CSS — правила, которые больше ничему не соответствуют: компонент удалили, а стили остались. Найти их трудно: класс .title может использоваться где угодно, и удалять его страшно. В итоге файлы стилей только растут, хотя половина кода давно не нужна.

Что такое методология

Методология — набор правил: как называть классы, какие селекторы разрешены, как делить стили на файлы. Самая известная из них — БЭМ, ей посвящена большая часть главы. Затем мы сравним её с OOCSS, SMACSS, ITCSS, утилитарным CSS и CSS-модулями. Каскадные слои @layer из прошлой главы хорошо дополняют любую из них.

Частая ошибка

Лечить проблему с каскадом через !important. Он побеждает сегодня, но завтра кому-то понадобится перебить уже его — и придётся писать второй !important, ещё сильнее. Если правило не срабатывает, ищите причину в селекторах, а не повышайте их силу.