Сколько раз ты ловил себя на том, что при верстке интерфейса приходится оборачивать обычную карточку в три слоя вспомогательных <div> только ради того, чтобы выставить внешние отступы или ограничить ширину строки? Это классическая болезнь компонентного подхода: мы пытаемся сделать независимые кирпичики, но связываем их правила с внешним контейнером.
Даже Консорциум Всемирной паутины (W3C), определяющий стандарты веба, годами страдал от этой проблемы на собственном портале. Дизайн-система официального сайта W3C, созданная британским агентством Studio 24 по методологии CUBE CSS, считалась эталоном семантики и доступности. Однако разработчики постоянно жаловались: карточки ломались при вложенности, текстовые блоки требовали жестких классов CMS, а шрифты на адаптивных контрольных точках неприятно дергались.
В официальном блоге W3C ведущий фронтендер Studio 24 Никола Сондерс (Nicola Saunders) опубликовала подробный отчет о капитальной ревизии стилей. Давай разберём, как отказ от лишних оберток и переход на современные стандарты CSS помогли упростить эталонную систему.
Шкала 1.125 и fluid-типографика: отказ от планетных Sass-миксинов
Первым делом команда взялась за типографику. Раньше размеры шрифтов рассчитывались через старые Sass-миксины с романтичными именами планет («Меркурий», «Юпитер», «Сатурн»). В теории это звучало красиво, но на практике гигантские заголовки H1 и H2 выглядели агрессивно, а результаты поиска в почтовых архивах консорциума превращались в кашу.
Команда перешла на строгую модульную шкалу с коэффициентом 1.125 (Major Second). Шаги между уровнями заголовков стали компактнее и гармоничнее. Но главное — старые медиа-запросы заменили адаптивной fluid-типографикой на базе функции clamp(). Размер шрифта теперь плавно масштабируется вместе с шириной экрана пользователя без резких ступенчатых скачков:
:root {
/* Базовые шаги модульной шкалы с плавным fluid-масштабированием */
--font-size-step--2: clamp(0.79rem, 0.77rem + 0.10vw, 0.84rem);
--font-size-step--1: clamp(0.89rem, 0.86rem + 0.14vw, 0.95rem);
--font-size-step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.07rem);
--font-size-step-1: clamp(1.13rem, 1.08rem + 0.25vw, 1.20rem);
--font-size-step-2: clamp(1.27rem, 1.21rem + 0.30vw, 1.35rem);
--font-size-step-3: clamp(1.42rem, 1.35rem + 0.36vw, 1.52rem);
--font-size-step-4: clamp(1.60rem, 1.51rem + 0.44vw, 1.71rem);
--font-size-step-5: clamp(1.80rem, 1.69rem + 0.55vw, 1.92rem);
--font-size-step-6: clamp(2.03rem, 1.89rem + 0.69vw, 2.16rem);
}
Все девять уровней вынесены в нативные CSS-переменные. Это позволило отказаться от компиляции Sass при смене темы и вернуло стилям динамическую гибкость.
Изоляция компонентов: карточки без списков и вложенность без обёрток
Второй и самый болезненный архитектурный компромисс старой версии — контекстная связанность карточек. Раньше карточка не могла существовать сама по себе: стили требовали обязательного родительского списка со специфическим классом .l-listing.
Команда полностью изолировала компонент .card. Карточка сама управляет своими внутренними отступами и границами. Это сразу решило проблему сложной вложенности: например, карточка участника <div class="card card--user"> теперь нативно вкладывается внутрь карточки организации <div class="card card--member">. Вложенный элемент автоматически адаптирует сетку, а аватар уменьшается на 30% без дополнительных костылей.
Кроме того, был полностью ликвидирован служебный контейнер <div class="component component--text">, в который CMS раньше заворачивала все абзацы ради контроля длины строки (65–75 символов). Ограничение перенесли прямо на сами текстовые элементы через логическое свойство max-inline-size:
/* Инкапсулированные правила карточки и ограничение длины строки контента */
.card {
padding-inline: 1.5rem;
padding-block: 1.25rem;
margin-block-end: 1.5rem;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
}
/* Ограничение длины строки перенесено с обёрток на базовые селекторы */
h1, h2, h3, h4, p, ul, ol, dl {
max-inline-size: 70ch;
}
Разметка стала чистой, а DOM-дерево избавилось от сотен мусорных узлов, что ощутимо облегчило чтение страниц скринридерами для незрячих пользователей.
Прощание с Normalize.css и переход на логические свойства
Финальным штрихом стало удаление библиотеки Normalize.css. Она не обновлялась с 2018 года и тащила за собой правила под браузеры десятилетней давности. Вместо нее внедрили современный минималистичный CSS-сброс в духе практик Энди Белла.
Команда избавилась от глобального обнуления * { margin: 0; padding: 0 }, ломавшего нативные элементы форм, и полностью перевела верстку на CSS Logical Properties (margin-block, padding-inline, inline-size). Это гарантирует, что при переключении интерфейса на арабский язык или иврит (режим RTL) сайт дизайн-системы W3C автоматически перестроит отступы без дублирования CSS-кода.
Опыт ревизии стилей W3C отражает общую эволюцию современного фронтенда: вместо бесконечного наслоения оберток и утилит зрелая разработка возвращается к нативным возможностям платформы, где каждый компонент отвечает строго за свою зону ответственности.