Моя структура CSS

Моя структура CSS

От автора: когда дело доходит до структурирования CSS, нет недостатка в различных соглашениях об именах, методологиях и архитектурах. Будь то BEM, OOCSS, SMACSS, ITCSS или CUBE CSS — за последние годы появилось множество различных подходов к управлению модульным CSS. Некоторые предлагают стратегии, как разбить CSS на более мелкие, более управляемые части, в то время как другие больше сосредотачиваются на соглашениях об именах для классов.

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

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

В этом посте я поделюсь своим текущим взглядом на структуру CSS. Он не придерживается какой-либо конкретной методологии, хотя люди, знакомые с ITCSS Гарри Робертса («CSS с перевернутым треугольником») определенно узнает части его методологии. Если вы еще не знакомы ITCSS, я очень рекомендую его. Что мне больше всего нравится, так это прагматичный, реальный подход и принцип структурирования CSS таким образом, чтобы он становился все более конкретным и явным по мере продвижения вниз по структуре. Это позволяет вам сосредоточиться в первую очередь на стилях высокого уровня и упрощает работу с каскадом, наследованием и специфичностью селектора, сохраняя при этом количество классов и специфичность! — как можно ниже. Однако есть несколько отличий, и это то, что я бы посоветовал любому, кто настраивает свою собственную структуру: возьмите любую методологию с долей скептицизма и свободно адаптируйте ее к своим потребностям и способу работы.

Структура папок

Вот как сейчас выглядит моя структура папок:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Давайте немного разберемся.

Настройки

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

design-tokens

Вторая папка предназначена для всех стилей, касающихся визуального словаря сайта. На этом уровне мы все еще не генерируем вывод CSS. Здесь мы определяем переменные для типографики, цветов, интервалов, медиа-запросов или любых других атрибутов, которые вы будете использовать во всем дизайне. Для этих атрибутов визуального дизайна прижился термин «токены дизайна». Эти токены дизайна могут даже исходить из вашей дизайн-системы как единственный источник истины.

Инструменты

В папке инструментов находятся глобальные миксины и функции Sass. Может быть, вы хотите управлять цветами с помощью режимов наложения или установить соотношение сторон для видео контейнера? Или, например, очистить float. Я сам не являюсь активным пользователем миксинов, но я знаю многих людей, которые их любят, так что здесь их можно разместить.

generic

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

Элементы

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Скелет

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

Составные части

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

Утилиты

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

_shame.scss

Этот файл, который является другой идеей Гарри Робертса, представляет собой место для всех постыдных решений CSS, таких как быстрые исправления и хакерские вещи, которые могут решить проблему на данный момент, но должны быть решены должным образом позже. Не забудьте задокументировать все эти неприятные хаки: Почему вы решили это таким образом? У вас уже есть идея, как решить эту проблему лучше? Что нужно для ее решения? И так далее…

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

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

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

На днях я спросил в Твиттере, какую методологию CSS вы все предпочитаете, и результаты, как и следовало ожидать, оказались неоднозначными.

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

Для справки, вот снова вся структура папок:

Автор: Matthias Ott

Источник: //matthiasott.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.