Бесклассовые vs. основанные на классах дизайн-системы CSS

• Что такое бесклассовая дизайн-система
• Что такое основанная на классах дизайн-система
• Какая из них "лучше"
• Гибридный подход

Что такое бесклассовая дизайн-система

Бесклассовая CSS дизайн-система, как следует из названия, не использует классы. Вместо этого она предоставляет базовые стили для собственных HTML-элементов.

Одна из самых известных бесклассовых систем — Water.css.

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

<h1>Hello, world!</h1>
<p>How are you today?</p>

<ol>
  <li>I'm good</li>
  <li>I'm bad</li>
  <li>I'm so/so</li>
</ol>

Что такое основанная на классах дизайн-система

В дизайн-системе, основанной на классах, почти ни один элемент не стилизуется по умолчанию, и для всего требуется класс.

Одной из самых популярных дизайн-систем, основанных на классах, является Bootstrap.

Как правило, базовые элементы в этой системе не нуждаются в классах, но в некоторых системах необходимость в классах заходит дальше, чем в других. Система US Web Design System (USWDS) (для проектов правительства Соединённых Штатов) требует классы для многих базовых элементов, включая списки, формы и так далее.

<h1>Hello, world!</h1>
<p>How are you today?</p>

<ol class="usa-list">
  <li>I'm good</li>
  <li>I'm bad</li>
  <li>I'm so/so</li>
</ol>

Какая из них "лучше"

У обеих систем есть свои преимущества и недостатки.

Мне не нравится, что приходится добавлять классы к таким вещам, как списки, формы и кнопки. Я хочу, чтобы эти базовые элементы были стилизованы "из коробки", когда я пишу код. По этой причине бесклассовые системы выглядят очень привлекательно.

Но они также довольно ограничены в своих возможностях.

Если вы хотите хоть в чем-то отклониться от базовых стилей, вам придётся создавать собственные компоненты и служебные классы. Это не обязательно плохо! Но в комплект поставки входит меньше батареек.

Дизайн-системы, основанные на классах, предоставляют гораздо больше гибкости и возможностей уже в готовом виде.

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

Но это также означает, что они поставляются с большим количеством вещей, которые вам, вероятно, не понадобятся. И в зависимости от системы, создание даже базовых компонентов может потребовать написания большого количества дополнительного кода.

В настоящее время я использую USWDS для проекта, над которым работаю для NASA (да, того самого NASA).

У него отличная документация и большое внимание к доступности. Но необходимость добавлять классы к всевозможным базовым элементам, которые на самом деле не сильно отклоняются от стандартных настроек браузера, порой утомляет.

Гибридный подход

Между бесклассовой и основанной на классах дизайн-системами есть нечто среднее.

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

Не знаю, можно ли назвать их бесклассовыми+ или основанными на классах-лайт, но они находятся где-то посередине.

Мой собственный CSS бойлерплейт Kraken был разработан как лёгкая, более модульная альтернатива Bootstrap. Он был в значительной степени вдохновлён Skeleton.

Цель таких систем — предоставить хорошую отправную точку, которую можно легко настроить под то, что вы хотите создать.

Завтра я расскажу о том, как я подхожу к архитектуре CSS.