От автора: когда дело доходит до структурирования CSS, нет недостатка в различных соглашениях об именах, методологиях и архитектурах. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS — за последние годы появилось множество различных подходов к управлению модульным CSS. Некоторые предлагают стратегии, как разбить CSS на более мелкие, более управляемые части, в то время как другие больше сосредотачиваются на соглашениях об именах для классов.
Иногда бывает трудно понять, в чем заключаются различия или преимущества определенных методологий, но, в конце концов, все они нацелены на одно: обеспечение структуры и последовательности, также известных как «предотвращение беспорядка», когда вы работаете в команде.
Неудивительно, что нет нового проекта, в котором я не начинал бы немного задумываться о структуре CSS, и со временем способ организации и написания CSS сильно изменился. Самое большое изменение произошло, когда мы все начали писать CSS для компонентов. Но и препроцессоры, такие как Sass, явно оставили свой след.
В этом посте я поделюсь своим текущим взглядом на структуру CSS. Он не придерживается какой-либо конкретной методологии, хотя люди, знакомые с ITCSS Гарри Робертса («CSS с перевернутым треугольником») определенно узнает части его методологии. Если вы еще не знакомы 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, либо в виде пользовательских свойств.
├── 1-settings │ └── _global.scss
design-tokens
Вторая папка предназначена для всех стилей, касающихся визуального словаря сайта. На этом уровне мы все еще не генерируем вывод CSS. Здесь мы определяем переменные для типографики, цветов, интервалов, медиа-запросов или любых других атрибутов, которые вы будете использовать во всем дизайне. Для этих атрибутов визуального дизайна прижился термин «токены дизайна». Эти токены дизайна могут даже исходить из вашей дизайн-системы как единственный источник истины.
├── 2-design-tokens │ ├── _colors.scss │ ├── _fonts.scss │ ├── _media-queries.scss │ ├── _spacing.scss │ └── _typography.scss
Инструменты
В папке инструментов находятся глобальные миксины и функции Sass. Может быть, вы хотите управлять цветами с помощью режимов наложения или установить соотношение сторон для видео контейнера? Или, например, очистить float. Я сам не являюсь активным пользователем миксинов, но я знаю многих людей, которые их любят, так что здесь их можно разместить.
├── 3-tools │ ├── _aspect-ratio.scss │ ├── _blend-modes.scss │ ├── _center.scss │ ├── _clearfix.scss │ └── _gradients.scss
generic
Как и в ITCSS, папка generic является первой, которая фактически производит CSS. Она содержит глобальные правила изменения размера блока, сброс 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
Составные части
Бьющееся сердце проекта. Здесь мы разрабатываем компоненты пользовательского интерфейса. В нескольких недавних проектах я иногда различал более крупные модули и более мелкие компоненты, но вы также можете вкладывать компоненты друг в друга без дополнительных различий. Используйте префиксы, если хотите, а также соглашение об именах, такое как BEМ, может иметь смысл. Недавно я остановился на BEМ-подобном, но более упрощенном соглашении об именах: просто используйте самое простое, но наиболее информативное имя класса и разделяйте элементы внутри других элементов с помощью простого тире, например, .card и .card-content. Иногда — например, когда я работаю с Fractal — CSS для отдельных компонентов может также находиться в другой папке вместе с кодом HTML и JavaScript. В этом случае папка компонентов может быть пустой или содержать ссылки через @import.
├── 7-components │ ├── _accordion.scss │ ├── _card.scss │ ├── _hero.scss │ ├── _pan-galactic-gargle-blaster.scss │ └── ...
Утилиты
Еще одна папка? Да, но это точно последняя. Папка утилит содержит служебные и вспомогательные классы и, что наиболее важно, состояния и модификаторы, такие как .is-active или .visually-hidden. Эти стили переопределяют стили предыдущих слоев и часто устанавливаются с помощью JavaScript. Мне очень нравится предложение Энди Белла в его методологии CUBE CSS использовать атрибуты данных для изменения состояния компонентов, что также полезно с точки зрения более высокой специфичности.
├── 8-utilities │ ├── _modifiers.scss │ └── _states.scss
_shame.scss
Этот файл, который является другой идеей Гарри Робертса, представляет собой место для всех постыдных решений 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
Автор: Matthias Ott
Источник: https://matthiasott.com
Редакция: Команда webformyself.