Используйте CSS в области видимости компонента, чтобы контролировать, на какие элементы действует правило, а общую таблицу стилей — чтобы повторно использовать правила на разных страницах. Для небольшого HTML-проекта на Mac можно сочетать оба подхода; выбирайте расположение файлов с учетом того, что вам нужно переносить и поддерживать.

В этом руководстве показано, как оформить локальную страницу с карточкой в форме скругленного квадрата и отдельной заметкой. Задача — сделать внешний вид карточки предсказуемым, а затем решить, должен ли ее CSS находиться внутри страницы или в отдельном файле для повторного использования. Подписи и форма вымышлены; пример не требует ни фреймворка, ни скачанных ресурсов.

Что именно вы выбираете?

Здесь нужно принять два решения: где хранить CSS и какие элементы он выбирает. Встроенная таблица стилей находится в элементе style HTML-документа. Внешняя таблица стилей — это отдельный ресурс, подключаемый с помощью link, с атрибутом rel="stylesheet" и путем href. Это способы HTML подключать CSS; ни один из них сам по себе не создает границу компонента для обычных селекторов. Стандарт HTML: элемент style, MDN: элемент ссылки на внешний ресурс.

В нативном CSS правило @scope задает границу выбора. Вы указываете корневой элемент, а затем пишете правила, действующие внутри его поддерева. Это позволяет использовать короткие селекторы, даже если в остальной части документа есть похожие элементы. В документации Chrome также проводится различие между нативной областью видимости и инструментами, которые переписывают селекторы с помощью сгенерированных классов или атрибутов. Если для работы примера компонента требуются такие инструменты, это дополнительная зависимость. Ограничьте область действия селекторов с помощью правила CSS @scope.

Для этой задачи используйте следующие рекомендации. Это редакторский совет, основанный на описанных механизмах, а не требование браузера.

Ваша текущая задача Рекомендуемое решение Что нужно перенести вместе с ним
Хранить одну небольшую страницу в одном файле Встроить CSS в элемент style HTML и любые отдельно подключенные ресурсы
Поддерживать одну и ту же карточку на нескольких страницах Использовать внешнюю таблицу стилей с отдельными классами компонента Каждую HTML-страницу и общую таблицу стилей
Использовать более короткие селекторы внутри заданного поддерева Добавить правила @scope с явным корнем — во встроенную или внешнюю таблицу стилей CSS и разметку, содержащую соответствующий корневой элемент
Поддерживать браузеры с неясной поддержкой областей видимости Оставить основное оформление в обычных правилах классов HTML и таблицу стилей, содержащую эти правила

Таким образом, слово «переносимый» требует конкретного смысла. Один HTML-файл удобно переносить отдельно. Папку с HTML и CSS тоже можно переносить, если пути к файлам остаются корректными. Для повторно используемого компонента нужна еще и третичная переносимость: в месте назначения должна сохраняться разметка с хуками, на которые рассчитывают его селекторы.

Создайте рабочий пример из двух файлов на Mac

Создайте папку с именем form-study. В ней сохраните два обычных текстовых файла с именами index.html и shared.css. Если используете TextEdit, выберите Файл > Новый, затем Формат > Преобразовать в обычный текст перед вставкой кода. Для HTML-файла Apple рекомендует сохранить его с расширением .html и при появлении запроса выбрать Использовать .html. Убедитесь, что фактическое имя таблицы стилей — shared.css, без добавленного суффикса .txt. Работа с HTML-документами в TextEdit на Mac.

Сохраните этот полный HTML-документ как index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Сохраните эту полную таблицу стилей как shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

Откройте index.html в Safari или другом настольном браузере. В результате должна появиться белая карточка с рамкой и синей скругленной фигурой, а под ней — заметка без рамки. Подключение таблицы стилей соответствует задокументированному шаблону MDN: HTML указывает CSS-ресурс с помощью атрибута href у ссылки на таблицу стилей. MDN: Подключение таблицы стилей.

В примере для заголовка карточки намеренно задан собственный класс. Так связь между элементом и его стилями становится наглядной без использования нативной области видимости. Фон страницы и шрифт заданы как параметры документа; рамка карточки, цвет заголовка и форма относятся к самой карточке. Сохраняйте это различие при извлечении повторно используемых правил: на целевой странице может понадобиться карточка без фона или ширины этой страницы.

Чтобы использовать оформление повторно, создайте в той же папке вторую HTML-страницу и подключите ту же таблицу стилей. Тогда обе страницы будут ссылаться на один CSS-файл. Считайте изменения в нем изменениями для всех подключенных страниц и проверяйте каждую после изменения общего правила.

Когда помогает нативный изолированный CSS?

Используйте @scope, если компонент состоит из нескольких элементов, для которых подходят простые локальные селекторы, особенно когда нужно явно ограничить область действия перед вложенным содержимым. Спецификация CSS Cascading and Inheritance определяет область видимости через корневые и необязательные ограничивающие элементы. Корневой элемент включается; ограничивающие элементы и их потомки исключаются из совпадений со scoped-правилами. Эта спецификация — рабочий черновик. CSS Cascading and Inheritance Level 6: Области видимости стилей.

Для небольшого эксперимента добавьте следующий необязательный фрагмент в конец файла shared.css. Он использует имеющуюся разметку и меняет внешний вид абзаца карточки:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

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

Если позднее вы добавите вложенную область с классом nested-sample, можно будет заменить этот необязательный фрагмент следующим. Это пример ограничения; в исходной странице такой вложенной области пока нет.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

Ограничение исключает вложенную область из совпадений с этими селекторами. Оно не обеспечивает полной изоляции стилей: наследуемые свойства, такие как color и font-family, могут распространяться за пределы ограничения области видимости. Помните об этом, если вложенный элемент все еще выглядит как родительский. MDN: описание @scope.

Явный корень, например .shape-card, также делает зависимости понятными при переносе CSS между файлами. В целевом документе должен быть элемент с этим классом. Перенос одной таблицы стилей не добавит необходимую разметку.

Какие есть ограничения поддержки браузерами?

Сейчас MDN помечает @scope как Baseline 2026: функция стала доступна в последних версиях браузеров в марте 2026 года. Старые браузеры могут ее не поддерживать. Сам факт, что у вас есть Mac, не позволяет определить, какие возможности CSS поддерживает установленный на нем браузер; проверьте сведения о совместимости для нужных вам версий. MDN: совместимость @scope с браузерами.

Если важна поддержка старых браузеров, оставьте основное оформление карточки в обычных правилах классов выше. Необязательное оформление абзаца с помощью области видимости можно оставить как дополнительное улучшение. При обработке ошибок CSS браузеры могут отбросить неподдерживаемое содержимое, продолжая обрабатывать корректный CSS, поэтому наличие таблицы стилей не означает, что сработали все содержащиеся в ней правила. MDN: Обработка ошибок CSS.

Чтобы оформить тот же абзац без @scope, задайте абзацу карточки отдельный класс, например shape-card__caption, а затем укажите этот класс в обычном правиле. Для этого потребуется дополнительный хук в разметке, но результат не будет зависеть от нативной поддержки областей видимости.

Не добавляйте атрибут scoped к элементу style, рассчитывая получить такое же поведение. В списке атрибутов этого элемента в действующем стандарте HTML такого атрибута нет. Для нативной области видимости CSS используется правило @scope. Стандарт HTML: элемент style, MDN: синтаксис @scope.

Как сохранить переносимость страницы?

В этом примере перенос всей папки form-study сохраняет связь между index.html и shared.css. Если перенести только HTML, таблица стилей останется на прежнем месте. Перед передачей авторской страницы или изменением ее структуры проверьте следующие зависимости:

  1. Разметка: сохраните классы компонента и структуру, необходимую его селекторам.
  2. Таблица стилей: приложите CSS-файл и проверьте, что HTML-ссылка указывает на его местоположение.
  3. Ресурсы: приложите все файлы, на которые ссылается CSS, сохранив или обновив их пути.
  4. Браузер: предусмотрите способ оформления, поддерживаемый версиями браузеров, в которых будут открывать страницу.

Третья проверка становится важной, когда в компоненте появляются шрифты или декоративные файлы. В документации MDN указано, что относительные URL в CSS разрешаются относительно URL таблицы стилей. Поэтому перенос объявлений в таблицу стилей из другой папки может изменить местоположение ресурса, на который они указывают. MDN: функция CSS url().

Например, если переместить внешнюю таблицу стилей из папки проекта в подпапку styles, объявление, напрямую указывающее на url("assets/tile.png"), теперь будет ссылаться на папку styles/assets. Обновите путь или сохраните соответствующую структуру каталогов. В рабочем примере такой зависимости нет: фигура полностью нарисована средствами CSS.

Если главное — передать один файл, поместите предоставленный CSS в элемент style внутри элемента head документа и удалите ссылку на таблицу стилей. Тогда для текущего примера понадобится только HTML-файл. Оставьте те же селекторы, включая необязательный блок @scope с явным корнем. HTML позволяет встроить таблицу стилей с помощью элемента style. Стандарт HTML: элемент style.

Проверьте решение, перенеся файлы и перезагрузив страницу

Скопируйте всю папку проекта в другое место, затем откройте скопированную HTML-страницу в браузере. В этой копии измените цвет фона фигуры в файле shared.css, сохраните его и перезагрузите страницу. Видимое изменение подтвердит, что вы редактировали таблицу стилей, используемую скопированной страницей.

Затем проверьте карточку и заметку. При успешной проверке стили карточки сохраняются, а заметка остается за пределами необязательного правила для абзаца с ограниченной областью видимости. Если страница полностью потеряла оформление, сначала проверьте имя CSS-файла и путь к нему в ссылке. Если отсутствует только необязательное оформление, проверьте поддержку браузером и корень области видимости. Если изменился посторонний элемент, проверьте, не охватывают ли селекторы элементы за пределами нужного компонента.

Чтобы снова открыть HTML в TextEdit, выберите Файл > Открыть, затем Показать параметры и Игнорировать команды форматированного текста, если нужно просмотреть исходный код. Apple также описывает настройку Показывать HTML-файлы как код HTML, а не как форматированный текст для последующих открытий. Работа с HTML-документами в TextEdit на Mac.

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

Источники