Как называть классы в ЦСС
Инструменты
Как называть классы в ЦСС
Инструменты
В предыдущем совете мы разобрали, как стоит подходить к именованию ЦСС‑классов, чтобы облегчить себе жизнь. Но можно пойти дальше и переложить часть этих забот на уже существующие технологии.
Разберём некоторые популярные методологии и инструменты для работы с ЦСС и ХТМЛ.
Методологии
OOCSS (Объектно‑ориентированный ЦСС). Суть методологии заключается в двух принципах:
Разделение структуры и оформления.
Разделение контейнера и содержания.
Выполнение первого принципа позволяет «нанизывать» стили классов‑модификаторов на каждый экземпляр элемента и максимально переиспользовать их. Второй принцип обеспечивает одинаковое поведение элемента, вне зависимости от того, в какое место сайта он помещён. Множество других методологий имеют схожие подходы. OOCSS не регламентирует правила именования селекторов.
/* Стили структуры определяют то, как элемент расположен и как он влияет на соседние элементы */
.button {
display: inline-block;
width: 180px;
height: 36px;
}
/* Стили оформления в классах-модификаторах определяют внешний вид элемента */
.button-blue {
color: white;
background: blue;
}
.button-red {
color: white;
background: red;
}/* Второй принцип нарушен — заголовок зависит от контейнера .news */
.news h2 {
...
}
/* Второй принцип выполняется — заголовок независим и может быть использован в любом контейнере */
.news-heading {
...
}
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб‑разработке, придуманный в Яндексе. По этой методологии все элементы делятся на две группы — блоки и элементы. Блоки — независимые элементы, которые могут быть использованы в любом месте страницы. Элементы — части блоков, которые не могут существовать вне своих блоков. У каждого элемента или блока могут быть модификаторы, изменяющие вид или поведение элемента. БЭМ позволяет разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая дублирования.
/* Блок */
.header {
display: flex;
}
/* Элемент */
.header__title {
font-size: 24px;
line-height: 30px;
}
/* Модификатор */
.header__title_big {
font-size: 32px;
line-height: 34px;
}
БЭМ и OOCSS можно использовать даже в статичной ХТМЛ‑вёрстке.
ЦСС‑модули перекладывают задачу изоляции компонентов на машину. Стили для каждого компонента описываются в отдельном файле‑модуле. Ко всем именам ЦСС‑классов автоматически добавляется суффикс или префикс, специфичный для модуля. Такой способ именования позволяет использовать любые, самые общие названия классов, и при этом они не будут конфликтовать с другими модулями. Это полностью снимает проблему изоляции и пересечения стилей. Над именами классов и планированием ЦСС‑архитектуры больше не нужно думать столь тщательно.
Использование ЦСС‑модулей не отменяет возможности использовать глобальные селекторы. Механика ЦСС‑модулей реализуется различными ЦСС‑препроцессорами и инструментами сборки. Вероятно, самый популярный способ собирать страницы с ЦСС‑модулями — использовать Вебпак с его лоадерами и плагинами.
// Использование с Реактом
import React from 'react';
import styles from './CustomButton.css';
export const CustomButton = () => {
return (
<button className={styles.button}>
Go
</button>
)
}
/* CustomButton.css */
.button {
display: inline-block;
width: 180px;
height: 36px;
}
Класс в итоговом ЦСС‑коде имеет уникальное имя, относящееся только к конкретному элементу конкретного компонента:
/* Скомпилированный ЦСС */
.CustomButton_button_3AUEufg {
display: inline-block;
width: 180px;
height: 36px;
}
Некоторые популярные ЦСС‑фреймворки
Bootstrap. Наверное, самый популярный фреймворк, который можно использовать как хороший фундамент для построения сайтов с единой дизайн‑системой. Каркас фреймворка составляют утилитарные классы, которые помогают решать стандартные задачи в вёрстке, не изобретая велосипед. Кроме утилитарных классов, в Бутстрапе есть уже готовые интерактивные компоненты — попапы, уведомления, элементы форм и многое другое.
Бутстрап легко настраивается под собственные нужды, если использовать препроцессор и подойти к этому процессу правильно. Цвета, размеры, значения отступов и прочие параметры конфигурируются через SASS‑переменные.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Tailwind CSS. Фишка фреймворка — утилитарный подход к управлению стилями. Вместо того, чтобы собирать ЦСС‑правила в одном классе, используется подход, когда мы навешиваем элементу различные классы с предустановленными правилами. Такой подход снимает проблему придумывания названий классов для элементов. Базовые утилитарные классы можно объединять в шаблоны с названием. Авторы рекомендуют устанавливать фреймворк как плагин для препроцессора ПостЦСС, но есть и другие варианты использования.
<div class="w-6/12 m-auto md:flex bg-gray-100 rounded-xl px-8 pt-4 pb-12">
<h1 class="font-sans font-extrabold text-gray-600 text-2xl mb-4">Заголовок</h1>
<p class="leading-relaxed text-blue-800">Тоталитарный тип политической культуры приводит субъект политического процесса одинаково по всем направлениям. Выставка директивно ограничивает экранированный имидж предприятия. Еще Траут показал, что аффинное преобразование однократно. Изменение глобальной стратегии, как правило, нейтрализует Каллисто. Гамма-квант доказывает ионный хвост, выслеживая яркие, броские образования.</p>
</div>
Это далеко не все инструменты для создания масштабируемого ЦСС‑кода, а только популярные и те, с которыми я сталкиваюсь регулярно. В зависимости от проекта и задачи, один инструмент может быть удобнее, чем другой. Без изучения особенностей, преимуществ и недостатков здесь не обойтись.
А какими инструментами пользуетесь вы?
Что ещё почитать
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.