Cascade layers: наводим порядок в каскаде

Проект живёт полгода. В стилях три тысячи строк. Ты добавляешь .button { background: teal; } — и кнопка остаётся серой.

Открываешь инструменты разработчика: правило зачёркнуто, победило .sidebar .panel .button из файла, который писал не ты. Ты дописываешь !important. Через месяц кто-то дописывает !important поверх твоего.

Это не проблема дисциплины. Это проблема архитектуры: у каскада нет способа сказать «сброс всегда слабее компонентов». Слои каскада (cascade layers) его дают.

Слой — это именованная группа правил. Порядок объявления слоёв важнее любой специфичности внутри них.

Правило из слоя components побеждает правило из base всегда — даже если в base селектор из трёх идентификаторов, а в components один класс.

1/* Один раз объявляем порядок — дальше он нерушим */2@layer reset, base, components, utilities;34@layer base {5  /* Даже такой тяжёлый селектор проиграет слою components */6  #app .sidebar .panel .button { background: #999; }7}89@layer components {10  .button { background: teal; }11}

<div id="app">  <div class="sidebar">    <div class="panel">      <button class="button">Кнопка</button>    </div>  </div></div>

@layer base, components;​@layer base {  /* Селектор из четырёх частей — и всё равно проигрывает */  #app .sidebar .panel .button { background: #999; }}​@layer components {  .button { background: teal; }}​.button {  padding: 10px 18px;  color: #fff;  border: 0;  border-radius: 8px;  font: inherit;}

Рабочий набор слоёв почти всегда один и тот же. Порядок читается сверху вниз как «от самого слабого к самому сильному».

1@layer reset, tokens, base, layout, components, utilities;23@import url("reset.css")      layer(reset);4@import url("tokens.css")     layer(tokens);5@import url("typography.css") layer(base);6@import url("grid.css")       layer(layout);78/* Чужая библиотека целиком уезжает в слабый слой */9@import url("vendor/datepicker.css") layer(vendor);1011@layer components {12  .card { padding: 20px; border-radius: 14px; }13  .card__title { margin: 0 0 8px; font-size: 1.1rem; }14}1516@layer utilities {17  /* Утилита обязана побеждать компонент — поэтому слой последний */18  .is-hidden { display: none; }19  .text-center { text-align: center; }20}

Слой можно разбить на подслои через точку. Порядок внутри работает по тем же правилам, а снаружи вся группа остаётся одним слоем.

Это нужно, когда компонентов становится много и внутри них появляется своя иерархия: сначала общие детали интерфейса, поверх — конкретные блоки страницы.

1@layer components {2  @layer elements, blocks, pages;3}45@layer components.elements {6  .button { padding: 10px 18px; border-radius: 8px; }7}89@layer components.pages {10  /* Страничное правило перекроет общее, но останется11     слабее всего слоя utilities */12  .checkout .button { width: 100%; }13}

Есть и анонимные слои — просто @layer { … } без имени. Такой слой нельзя дополнить позже и нельзя переупорядочить: он занимает место там, где написан.

Применение у них одно: изолировать кусок стороннего кода, к которому больше не планируешь возвращаться. Для своего кода имена почти всегда лучше.

Переезд не требует переписывать селекторы. Он делается за один вечер и откатывается одной строкой.

Слои — инструмент против большого чужого кода. У маленького проекта их цена выше пользы.

• Лендинг на 200 строк. Порядок правил и так виден целиком. Слои добавят уровень вложенности и ничего не решат.
• Как замена дисциплине. Если внутри слоя components продолжают писать селекторы из пяти частей, война просто переедет внутрь слоя.
• Ради «модно». Слои усложняют отладку: в инструментах разработчика придётся смотреть не только на специфичность, но и на слой. Заводить их стоит, когда боль уже есть.

Слои управляют только приоритетом правил. Всё остальное остаётся на тебе.

Они не уменьшают количество кода: три тысячи строк останутся тремя тысячами, просто перестанут спорить друг с другом. Они не наводят порядок в именах: .block-2-final в слое components так и останется непонятным. И они не отменяют наследование — унаследованный color приходит от родителя мимо всех слоёв.

Ещё одна тонкость: слои никак не влияют на порядок загрузки. Если файл подключён позже, его правила всё равно применятся позже — просто внутри своего слоя.

.sidebar .card .title {
  font-size: 18px !important;
}

@layer components {
  .card__title { font-size: 18px; }
}

<button class="button">Кнопка</button><p class="note is-hidden">Этот абзац должен быть скрыт</p>

/* Порядок слоёв объяви здесь */​button { background: #999; color: #fff; }​#app .button,.panel .button { background: #777; }​.button {  padding: 10px 18px;  background: teal;  border: 0;  border-radius: 8px;  font: inherit;  color: #fff;}​.is-hidden { display: none; }

1<button class="button">Кнопка</button>2<p class="note is-hidden">Этот абзац должен быть скрыт</p>

1@layer reset, base, components, utilities;23@layer reset {4  button { background: #999; color: #fff; }5}67@layer base {8  #app .button,9  .panel .button { background: #777; }10}1112@layer components {13  .button {14    padding: 10px 18px;15    background: teal;16    border: 0;17    border-radius: 8px;18    font: inherit;19    color: #fff;20  }21}2223@layer utilities {24  .is-hidden { display: none; }25}