Напоминание, что @scope и блоки стилей HTML — это мощное сочетание

Приходилось ли вам писать компонент React, импортирующий стили с ограниченной областью видимости, в виде CSS модуля?

import styles from "./MyComponent.module.css";

Или использовать стилизованный компонент, позволяющий наложить определённые стили на компонент, который уже определён?

const Button = styled.button;

Может быть, ваши компоненты Vue использовали внутри блоки <style scoped>, как это можно делать с однофайловыми компонентами Vue из коробки?

<template>
  <button>Submit</button>
</template>

<style scoped>
  button {
    border: 3px solid green;
  }
</script>

Несмотря на кажущуюся широкую применимость селектора button выше, стили на самом деле будут жёстко привязаны к кнопке, которую вы увидите в шаблоне после обработки.

А может быть, используете Tailwind для применения классов стилей непосредственно к элементам, и вам это нравится отчасти потому, что не надо ничего называть.

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

• Беспокоиться не о чем. Стили не просочатся наружу и не приведут к нежелательным последствиям.
• Можно делать эффективные вещи, например, не загружать стили для компонентов, которые не отображаются на конкретной странице во время загрузки.
• Когда компонент удаляется, удаляются и его стили.
• Стили часто совмещены с компонентом, то есть между разметкой и стилями существует очевидная логическая связь.

Хочу вам сказать, что всё это можно сделать с помощью HTML и CSS.

И я даже не говорю о веб-компонентах или о чем-то особенно спорном или ограничивающем. Ванильный HTML и CSS.

Для этого нужно добавить блок <style> в HTML в том месте, где вы хотите использовать стили. Вот так:

<main>

   <div>
     <p>Dum de dum de dum.<p>
   </div>

   <div>
     <p>Hi ho here we go.</p>

     <style>
      @scope { /* Область видимости - <div> выше, так как это прямой потомок. */
        :scope { /* Это выбирает <div> */
          border: 1px solid red;

          /* Здесь можно использовать вложенность CSS, гарантируя, что *всё* будет безопасно скопировано */
          p {
            color: red;
          }
        }
      }
     </style>
   </div>

</main>

Вот пример его использования, когда одна из трёх <article> имеет вариацию стилей:

See the Pen

Я использовал стили с ограниченной областью видимости в качестве вариации, но весь блок стилей этого компонента может быть использован подобным образом, независимо от того, является ли он вариацией или нет. Это способ применить стили только к определённой ветви дерева DOM. Никаких инструментов не требуется. Любой способ создания компонентов, попадающих в DOM, может быть реализован таким образом, от базовых HTML-компонентов до причудливых компонентов фреймворка.

Почему это мало используется?

Думаю, дело в основном в поддержке Firefox. На момент написания этой статьи Firefox просто не поддерживает его. Я бы сказал, что это сильный кандидат на Interop 2025. Похоже, что его пытались представить в 2024 году, возможно, он был слишком новым или что-то в этом роде. Но, возможно, Interop не нужен, так как над ним активно работают, так что, может быть, это будет не так долго, не знаю.

Как только появится поддержка Firebox, могу представить, что этот способ будет широко использоваться как способ реализации стилей с ограниченной областью видимости для компонентов. Для этого не требуется никаких инструментов или ограничений на использование CSS. Думаю, что это подойдёт любому существующему инструменту создания CSS стилей с ограниченной областью видимости, так как это потребует гораздо меньше усилий и ускорит работу.

CSS @scope может делать больше вещей, но именно эта возможность мне больше всего нравится и, вероятно, со временем окажет наибольшее влияние.

Комментарии