Как я структурирую CSS

Приветствую. Представляю вашему вниманию перевод статьи «How I Structure My CSS (for Now)», опубликованной 11 августа 2020 года автором Matthias Ott

Когда вопрос касается структурирования CSS, нет недостатка различных соглашений об именовании, методологий и архитектур. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS - за последние годы появилось много разных подходов к управлению модульным CSS. Одни предлагают стратегии разделения CSS на небольшие, лучше поддающиеся управлению фрагменты, другие больше сосредотачиваются на соглашениях об именовании классов. Порой сложно понять, в чём отличия или преимущества определённых методик, но у всех них, в конце концов, одна цель – обеспечить единую структуру и принципы при работе в команде с другими людьми или с самим собой в будущем.

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

В этой статье я поделюсь своим текущим принципом структурирования CSS. В нём я не придерживаюсь какой-либо определённой методологии, хотя те, кто знаком с ITCSS Гарри Робертса, определённо увидят сходства. Если вы ещё не знакомились с ITCSS, настоятельно рекомендую это сделать. Больше всего в этой методологии мне нравится прагматичный, полностью прикладной подход и принцип структурирования, делающий CSS всё более конкретным и явным по мере продвижения вниз по структуре. Это облегчает работу с каскадом и наследованием селектора, оставляя количество классов их специфичность на низком уровне. Существует, однако, и несколько отличий, и это именно то, что я предлагаю любому, кто создаёт свою собственную структуру: берите любую методологию и свободно адаптируйте её к своим потребностям и способу работы.

Структура основной папки

Вот так в данный момент выглядит структура моей папки. Давайте разбираться

/scss/
├── 1-settings
├── 2-design-tokens
├── 3-tools
├── 4-generic
├── 5-elements
├── 6-skeleton
├── 7-components
├── 8-utilities
├── _shame.scss
└── main.scss

Настройки

Первая папка 1-settings предназначена для общих настроек проекта, самой базовой конфигурации. Это может быть набор глобальных переменных: Sass-переменных или CSS-переменных

├── 1-settings
│   └── _global.scss

Дизайн-токены

Вторая папка предназначена для стилей, касающихся визуального оформления сайта. Мы всё ещё не пишем правила, предназначенные для стилизации разметки. Здесь мы определяем переменные для шрифта, цветов, отступов, медиа-запросов и всего остального, что будем использовать при вёрстке. Эти атрибуты визуального оформления принято называть "дизайн-токенами". Их значения могут быть взяты из дизайн-системы вашего проекта.

├── 2-design-tokens
│   ├── _colors.scss
│   ├── _fonts.scss
│   ├── _media-queries.scss
│   ├── _spacing.scss
│   └── _typography.scss

Инструменты

Папка "Tools" предназначена для ваших глобальных Sass-миксинов и функций. Возможно, вы захотите управлять цветами с помощью режимов смешивания (blend-mode) или установить соотношение сторон для элемента, содержащего видео? Или применить "clear" для каких-то float-элементов. Сам я не особо использую миксины, но знаю много людей, которые их любят.

├── 3-tools
│   ├── _aspect-ratio.scss
│   ├── _blend-modes.scss
│   ├── _center.scss
│   ├── _clearfix.scss
│   └── _gradients.scss

Общие стили

Как и в методологии ITCSS, "generic" - первая папка, в которую помещаются стили для оформления разметки. Она содержит глобальные правила "box-sizing", сброс CSS или стили для печати - всё, что должно быть задано в самом начале CSS, но еще не зависит от конкретного проекта.

├── 4-generic
│   ├── _box-sizing.scss
│   ├── _font-face.scss
│   ├── _normalize.scss
│   └── _print.scss

Элементы

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

├── 5-elements
│   ├── _forms.scss
│   ├── _headings.scss
│   ├── _images.scss
│   ├── _links.scss
│   └── _lists.scss
│   ├── ...

Скелет

Любой современный веб-проект, создаваемый с использованием компонентов, требует структуры, рассчитанной для этого: обёртки, контейнеры, гриды, всевозможные переиспользуемые объекты, которые образуют раскладку. Это скелет вашего сайта.

├── 6-skeleton
│   ├── _grid.scss
│   ├── _layouts.scss
│   └── _objects.scss

Компоненты

Сердце проекта. Здесь мы разрабатываем компоненты интерфейса. В нескольких последних проектах я даже отделял большие модули и маленькие компоненты, но вместо этого можно просто вкладывать компоненты друг в друга. Если нравится, можете использовать префиксы и соглашение об именовании, такое как BEM. Недавно я остановился на BEM-подобном, но более упрощённом соглашении об именовании. Суть в том, чтобы использовать как можно более простые, но информативные имена классов и разделять элементы и их содержимое чертой. Например, .card и .card-content. Иногда, когда я работаю с Fractal, CSS для отдельных компонентов может также находиться в другой папке вместе с HTML и JavaScript-кодом. В этом случае папка с компонентами может быть пустой или содержать @import@.

├── 7-components
│   ├── _accordion.scss
│   ├── _card.scss
│   ├── _hero.scss
│   ├── _pan-galactic-gargle-blaster.scss
│   └── ...

Утилиты

Ещё одна папка? Да, но эта - последняя. Папка "utilities" содержит служебные и другие полезные классы и, самое главное, состояния и модификаторы, такие как .is-active или .visually-hidden. Эти стили переопределяют стили предыдущих слоёв и часто устанавливаются через JavaScript. Мне очень нравится предложение Andy Bell в его методологии CUBE CSS использовать data-атрибуты для изменения состояния компонентов, что также полезно с точки зрения большей специфичности.

├── 8-utilities
│   ├── _modifiers.scss
│   └── _states.scss

_shame.css

Этот файл является ещё одной идеей Harry Roberts и предназначен для всех постыдных CSS-решений, таких как быстрые фиксы и хаки, которые могут выступить временным решением, но позже должны быть реализованы как полагается. Обязательно документируйте все эти временные меры с помощью комментариев. Почему вы реализовали это именно так? Есть ли у вас идея, как сделать лучше? Что для этого нужно? И так далее.

Собираем всё вместе

Наконец, файл main.scss, собирающий все части воедино. Я предпочитаю явно импортировать каждый файл в отдельной строке вместо импорта всех папок, потому что это даёт больше контроля над последовательностью подключения. Но это, конечно, личное дело каждого.

@charset "UTF-8";

// 1. Settings
@import 
	"1-settings/global";
  
// 2. Design Tokens
@import
  "2-design-tokens/colors",
  "2-design-tokens/fonts",
  "2-design-tokens/media-queries",
  "2-design-tokens/spacing",
  "2-design-tokens/typography";
...

Вот и всё. Такая структура хорошо проявила себя в последних проектах, потому что помогает поддерживать порядок. Получаемый CSS также намного чище, что облегчает поиск нужного фрагмента кода, если нужно внести изменения или исправить ошибки.

На днях я делал опрос в Твиттер о предпочитаемой CSS-методологии:

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

Итоговая структура папок:

/scss/
├── 1-settings
│   └── _global.scss
├── 2-design-tokens
│   ├── _colors.scss
│   ├── _fonts.scss
│   ├── _media-queries.scss
│   ├── _spacing.scss
│   └── _typography.scss
├── 3-tools
│   ├── _aspect-ratio.scss
│   ├── _blend-modes.scss
│   ├── _center.scss
│   ├── _clearfix.scss
│   └── _gradients.scss
├── 4-generic
│   ├── _box-sizing.scss
│   ├── _font-face.scss
│   ├── _normalize.scss
│   └── _print.scss
├── 5-elements
│   ├── _forms.scss
│   ├── _headings.scss
│   ├── _images.scss
│   ├── _links.scss
│   ├── _lists.scss
│   └── ...
├── 6-skeleton
│   ├── _grid.scss
│   ├── _layouts.scss
│   └── _objects.scss
├── 7-components
│   ├── _accordion.scss
│   ├── _card.scss
│   ├── _hero.scss
│   ├── _pan-galactic-gargle-blaster.scss
│   └── ...
├── 8-utilities
│   ├── _modifiers.scss
│   └── _states.scss
├── _shame.scss
└── main.scss