21 января 2021 года.

Пара слов о @layer

Дисклеймер: статья представляет собой неполный перевод одного из разделов спецификации c некоторыми дополнениями.

Точно так же, как каскадные источники обеспечивают баланс между стилями пользователя и разработчика, каскадные слои обеспечивают способ организации структуры в рамках одного источника.

Разработчики могут создавать слои для представления значений по умолчанию, тем, вложенных компонентов и других аспектов стилизации, и могут переупорядочивать каскад слоев явным образом, без изменения селекторов внутри каждого слоя.

Например, следующий код создает явный слой myLayer с меньшим весом каскада, чем любые стили вне слоев:

button {
  color: red;
}

@layer myLayer {
  button.class {
    color: blue;
  }
}

В таком случае кнопка button.class будет красной, даже не смотря на то что декларация внутри слоя имеют большую специфичность (0,1,1 против 0,0,1).

А в этом примере кнопка будет зеленой:

@layer legacy, newStyle;

@layer newStyle {
  button.class {
    color: green;
  }
}

@import url(legacy.css) layer(legacy);

Объявление каскадных слоев: правило @layer

Правило @layer определяет явный каскадный слой с возможностью назначать правила стиля.

Синтаксис :

@layer <layer-ident>? {
  <stylesheet>
}

Такие правила блока @layer имеют те же ограничения и обработку, что и css-conditional с истинным условием.

Правило @layer также можно использовать для определения новых слоев без назначения каких-либо правил стиля, указав только имя слоя:

@layer <layer-ident>#;

Такие пустые @layer разрешены везде, где разрешены либо @import, либо другие правила @layer.

Синтаксис импорта в слой:

@import [ <url> | <string> ] layer | layer (<layer-ident>)

Такие правила импорта имеют те же ограничения и обработку, что и @import, за исключением того, что импортированные правила назначаются указанному слою.

В обоих случаях необязательный <layer-ident> - это идентификатор, который представляет имя этого слоя. Новый слой создается если имя слоя не совпадает с именем другого слоя, уже определенного в этом контексте, источнике и области действия (см. нестинг слоёв). В противном случае или если <layer-ident> не указан, создается новый каскадный слой.

Идентификаторы слоя не являются обязательными, но позволяют применять несколько блоков стилей к одному слою:

@import url("links.css") layer(myLayer);

@layer myLayer {
  button.class {
    color: blue;
  }
}

Больший приоритет имеет слои, объявленный ближе к концу документа. То есть приоритет имеет обратный порядок относительно порядка создания. В этом примере buttonбудет злененой:

@layer common {
  button {
    color: red;
  }
}

@import url("theme.css") layer(theme);

@layer components {
  button {
    color: green;
  }
}

Есть возможность объявлять без наполнения, только по именам. Это позволяет более явно задавать приоритет слоёв. То есть в этом примере кнопка button будет красной:

@layer components;
@layer common;
@layer theme;

/* или через запятую: */
/* @layer components, default, theme;*/

@layer common {
  button {
    color: red;
  }
}

@import url("theme.css") layer(theme);

@layer components {
  button {
    color: green;
  }
}

$ Нестинг слоёв

Когда правила @layer вложены, имена вложенных слоев привязаны к их родительскому слою.

Например:

@layer common {
  p { max-width: 70ch; }
}

@layer framework {
  @layer common {
    p { margin: 1em; }
  }

  @layer theme {
    p { color: green; }
  }
}

Полученные слои можно представить как вложенный список:

• common
• framework
  • common
  • theme

Или плоским списком:

• common
• framework.common
• framework.theme

Вложенные слои не могут ссылаться на слои из внешней области, но внешние могут ссылаться на вложенные, комбинируя идентификаторы с символом точки.

Например:

@layer framework {
  @layer common {
     p { margin: 1em; }
  }

  @layer theme {
    p { color: green; }
  }
}

@layer framework.theme {
  /* эти стили будут добавлены к 
     слою theme внутри слоя framework */
  button { color: red; }
}

$ Ключевое слово revert-layer

Если cascaded value свойства является ключевое слово revert-layer, то оно откатывается до уровня ниже, так что specified value вычисляется так, как если бы правила не были указаны в текущем слое для этого свойства в этом элементе.

Если в том же каскадном источнике нет объявлений с более низким приоритетом, чем значение revert-layer, каскадное значение вернется к предыдущему источнику, как и для ключевого слова revert.

Например, в этом примере кнопка будет красной:

@layer common {
  button { color: red; }
}

@layer components {
  button {
    color: blue;
  }
  button {
    color: revert-layer;
  }
}

А здесь синей:

@layer common {
  button { color: red; }
}

@layer components {
  .class {
    color: blue;
  }
  button {
    color: revert-layer;
  }
}

$ Зачем слои нужны на практике?

• Рефакторинг Оборачиваем старые стили в слой @layer legacy и даем ему наименьший приоритет. Пишем новые стили в слое с более высоким приоритетом или вне слоёв.

• Темы Пишем стили настраиваемых тем в слоях с более высоким приоритеом чем дефолтная. В этом случае без слоя стоит оставить только стили вне тем. Традиционно это позиционирование, отступы и т.п.

• Организация кода По приоритету: сначала сброс стилей браузера, потом базовые стили, стили компонентов и сверху стили темы.

  @layer reset {}
  @layer base {}
  @layer components {}
  @layer theme {}

• Сторонние библиотеки Слои позволяют гибко управлять приоритетом стилей из сторонних библиотек.

Обновления

21.03.2021 - republish WD of Cascade 5

• Изменен синтаксис импорта в слой 5681
• Добавлен раздел про ключевое слово revert-layer 5793

Источники

• Спецификация Сascade
• Оригинальный пропозл слоёв

Post Scriptum

Вопросы и предложения пишите мне в телеграм @ariarzer :)

За помощь в написании и всём остальном спасибо @SelenIT2 ❤️