Меня зовут София. Я - CSS инженер. Это мой блог.

Если вам очень больно без стилей, вы можете их.

Пара слов о @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; }
  }
}

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

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

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

Например:

@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;
  }
}

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

Обновления

21.03.2021 - republish WD of Cascade 5

Источники

Post Scriptum

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

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