Как сравнить HTML/CSS с ближайшими альтернативами по DX, performance, SEO, accessibility, hiring и поддержке команды?

HTML/CSS в сравнении с ближайшими альтернативами

Прямых «конкурентов» у HTML/CSS нет — это базовый уровень веба. Сравнение уместно вести между подходами к написанию стилей и разметки: нативный HTML+CSS, CSS-in-JS (Emotion, styled-components), атомарный CSS (Tailwind), CSS Modules, и Shadow DOM / Web Components.

Developer Experience (DX)

• Нативный CSS: нет абстракций, прямой доступ к спецификации. Медленный старт в крупных проектах без архитектуры, но отличный для small/medium.
• Tailwind CSS: наивысший DX по скорости прототипирования. Не нужно придумывать имена классов. Минус — HTML становится громоздким, сложнее читать логику разметки.
• CSS Modules: хороший баланс — знакомый синтаксис CSS плюс автоматическая изоляция. Хорошо работает с TypeScript через typed-css-modules.
• CSS-in-JS (Emotion/styled-components): максимальная интеграция со state, props-driven стили. Но runtime overhead и сложность SSR/гидратации снижают DX на production-уровне.

Performance

• Нативный CSS + CSS Modules: статические файлы, нет runtime. Лучший вариант для Core Web Vitals.
• Tailwind: генерирует минимальный CSS после purging — production bundle обычно 5–15 KB.
• CSS-in-JS с runtime: добавляет 10–40 KB JS, требует разбора стилей в браузере, блокирует рендеринг. Emotion и styled-components имеют zero-runtime варианты (Linaria, vanilla-extract), но теряют динамичность.
• Web Components / Shadow DOM: инкапсулированные стили без утечек, но pierce-через-shadow-DOM сложен, и полифилы добавляют вес.

SEO

Для SEO важен быстрый First Contentful Paint и корректная семантика. Нативный HTML с правильными тегами (<article>, <nav>, <main>, <h1>-<h6>) даёт поисковику чёткую структуру. CSS-in-JS с SSR требует дополнительной настройки (StyleSheet.extractCritical в Emotion) для избежания FOUC, что усложняет серверный рендеринг.

<!-- Хорошая семантика для SEO -->
<article itemscope itemtype="https://schema.org/JobPosting">
  <h1 itemprop="title">Senior Frontend Developer</h1>
  <p itemprop="description">...</p>
  <div itemprop="hiringOrganization" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Acme Corp</span>
  </div>
</article>

Accessibility

• Нативные HTML-элементы (<button>, <input>, <select>) имеют встроенную ARIA-роль, keyboard navigation и focus management.
• CSS-трюки (div + checkbox hack вместо <details>) ломают скринридеры.
• Tailwind не ухудшает доступность, но и не помогает — семантика зависит от HTML.
• Web Components с Shadow DOM изолируют focus trapping — нужны polyfills для delegatesFocus.

Hiring и поддержка команды

• Нативный CSS: знает каждый фронтендер. Нет порога входа, легко найти людей.
• Tailwind: популярен, но требует 1–2 дня на освоение mental model. Работодатели всё чаще указывают его в требованиях.
• CSS-in-JS: разработчики с React-опытом осваивают быстро, но senior-специалисты часто предпочитают CSS Modules за предсказуемость.
• Web Components: маленький рынок специалистов; используется в design system командах крупных компаний (Google, SAP).

Подводные камни

• Tailwind и code review: длинные строки классов трудно ревьюить в diff-формате — нужны prettier-plugin-tailwindcss и clsx для условных классов.
• CSS-in-JS и SSR: без явной критической-CSS-экстракции страница мигает при гидратации — тест в режиме disable JavaScript обязателен.
• Нативный CSS и масштаб: без @layer и методологии глобальные стили превращаются в «CSS суп» на проектах с 10+ разработчиками.
• Web Components и React: React 18 имеет ограниченную поддержку Custom Events от Web Components — требуются workarounds через ref.
• Специфичность Tailwind: все утилитарные классы имеют одинаковую специфичность, порядок в stylesheet решает — это ломает интуицию при переопределении.
• Semantic HTML и custom UI: кастомные компоненты (datepicker, combobox) требуют полной реализации ARIA Authoring Practices Guide — это значительный объём работы.
• CSS Custom Properties vs Sass-переменные: Sass-переменные компилируются в значения и не доступны из JS; Custom Properties живут в runtime — важное архитектурное отличие при построении theme-системы.

• Сравнивать HTML/CSS с альтернативами по одному признаку
• Путать личную привычку с инженерным критерием выбора
• Не учитывать migration cost и vendor/ecosystem lock-in

• Сравнивает HTML/CSS по нескольким инженерным осям
• Не путает популярность с пригодностью
• Понимает migration cost и долгосрочную поддержку