Архитектура CSS — структура папок и файлов

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

Прежде чем мы начнем, несколько слов о том, кто я. Меня зовут Элад Шехтер, и я работаю разработчиком 13 лет. Последние девять лет я работаю над архитектурой CSS / HTML. В этой статье я покажу мои рекомендации по определению архитектуры CSS, основанные на моем многолетнем опыте.

Примечание: в настоящее время, как правило, в проектах используется CSS-препроцессор. В этом посте я буду использовать препроцессор SASS.

Я разделил этот пост на разделы, соответствующие основным элементам моей архитектуры. Основная структура моих проектов состоит из уровня конфигурации и уровня содержимого; уровень содержимого состоит из других уровней, главные из которых является слой партиалов. Этот слой содержит элементы, компоненты, последовательности, а иногда объекты.

Базовая структура

Я строю свои проекты, используя два основных файла: файл конфигурации и файл стилей содержимого. Файл конфигурации с именем _config.scss ссылается на все файлы конфигурации, а файл стилей содержимого, который называется, _local.scss ссылается на все папки и файлы в локальной папке.

Помимо того, что это полезно для разделения задач, этот раздел поможет вам создать архитектуру CSS, даже если у вас более одного веб-сайта. Архитектура для нескольких сайтов — это то, о чем я расскажу в следующем посте!

В main.scss подключаются оба этих файла.

Основная папка SASS:

sass/ | |- framework/ |- _config.scss |- _local.scss |- main.scss

Файл main.scss:

@import "config";
@import "local";

Уровень конфигурации (_config.scss)

На уровне конфигурации я определяю все переменные SASS / CSS и некоторые основные определения для root. Чтобы добиться оптимальной структуры проекта, я делю конфигурацию на более мелкие файлы в соответствии с их логической функцией. Пример:

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

framework/ | |- config/ | |- _common.scss | |- _cdn.scss | |- _colors.scss | |- _directions.scss | |- _breakpoints.scss | |- _layers.scss | |- local/ | |- Folders and Files | |- _config.scss |- _local.scss |- main.scss

Уровень содержимого (_local.scss)

Уровень содержимого, расположенный внутри _local.scss, представляет основные стили содержимого, т. е. именно здесь вы должны разместить все свои стили.

Этот слой должен включать миксины SASS, CSS Normalize и CSS Reset, шрифты, иконки, служебные классы CSS, общие сетки и партиалы.

framework/ | |- config/ | |- config files | |- local/ | |- _mixins.scss | |- _resets.scss // normalize + resets + typography | |- _fonts.scss | |- _icons.scss // font icons/SVG icons | |- _utilities.scss | |- _grids.scss // common layouts | |- _partials.scss // elements/components/entities/pages | |- _config.scss |- _local.scss |- main.scss

На уровне содержимого размещаются стили, принадлежащие множеству различных логических частей, таких как сброс, шрифты, иконки и т. д. Даже если мы разделим его на минимальное количество файлов, мы можем получить до 7 или 8 файлов. В некоторых случаях лучше разделить их на еще более мелкие части, чтобы файлы .sass не становились слишком большими, т. е. не более 50 строк, если вы пишете определения стилей по одной строке для каждого селектора, и не более 200 строк, если каждое определение занимает целый ряд.

Вот некоторые примеры:

Уровень миксинов

Просмотр папки:

framework/ | |- local/ |- |- mixins/ | | |- _trim.scss | | |- _rotation.scss | | |- _prevent-select.scss | | |- _break-word.scss | | |- _scrollbar.scss | | |- _screen-reader.scss | |- _mixins.scss

_mixins.scss:

@import "mixins/trim";
@import "mixins/rotation";
@import "mixins/prevent-select";
@import "mixins/break-word";
@import "mixins/scrollbar";
@import "mixins/screen-reader";

Уровень сброса

Просмотр папки:

framework/ | |- local/ |- |- resets/ | | |- _normalize.scss | | |- _reset.local.scss | | |- _typography.scss | |- _resets.scss

_resets.scss

/*resets*/
@import "resets/normalize";
@import "resets/reset.local";
@import "resets/typography";

Уровень партиалов (_partials.scss)

_Partials.scss является одним из основных файлов в уровне _local.scss. Именно здесь я помещаю все компоненты, будь то маленькие, средние или большие.

framework/ | |- config/ | |- config files | |- local/ | ... | |- _partials.scss // elements/components/entities/pages | |- _config.scss |- _local.scss |- main.scss

Поскольку уровень partials такой большой, я делю его на меньшие логические внутренние уровни, где-то от 3 до 5 файлов. Количество файлов может меняться в зависимости от проекта или ваших предпочтений.

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

framework/ | |- local/ | |- partials/ | |- 1-elements/ | |- 2-components/ | |- 3-sequences/ | |- 4-entities/ | |- 5-pages/ | |- _1-elements.scss | |- _2-components.scss | |- _3-sequences.scss | |- _4-entities.scss | |- _5-pages.scss | |- _partials.scss // elements/components/entities/pages

_partials.scss:

// from most generic to specific
@import "partials/1-elements";
@import "partials/2-components";
@import "partials/3-sequences";
@import "partials/4-entities";
@import "partials/5-pages";

Как определить, где на уровне _partials.scss разместить стиль

Прежде чем размещать что-либо на уровнях, помните, что иконки, общие таблицы, шрифты и служебные классы не принадлежат этому уровню! Они размещаются на предыдущих уровнях.

Определения на этом уровне делятся на несколько типов:

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

Важно поместить каждую часть в отдельный файл. Таким образом, вы можете легко управлять этими базовыми стилями, не беспокоясь о том, что они могут повлиять на другие части CSS, когда вы захотите изменить эти стили. Пример для файла _1-elements.scss (часть _partials.scss)

/*общие*/
@import "1-elements/common-links";
@import "1-elements/titles";
@import "1-elements/common-popup";
/*Кнопки*/
@import "1-elements/common-button";
@import "1-elements/button-icon";
@import "1-elements/button-tabs";
@import "1-elements/tooltip-button";
/*формы*/
@import "1-elements/select-row";
@import "1-elements/forms";
@import "1-elements/search";
@import "1-elements/search-result";
/*таблицы*/
@import "1-elements/common-table";
@import "1-elements/table-summary";
@import "1-elements/table-links";
@import "1-elements/table-filtering";
/*другое*/
@import "1-elements/system-alerts";
......... и многое другое...

(Разбейте все (!) на мелкие части)

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

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

// от наиболее общих до специфичных
@import "partials/1-elements";
@import "partials/2-components";
@import "partials/3-sequences";
@import "partials/4-entities";
@import "partials/5-pages";

Последовательности — это список статей. Они обычно отображаются на новостных сайтах, в блогах или на любом сайте, на котором есть список материалов для чтения. Последовательности могут иметь партиалы с элементами или компонентами внутри них, аналогично элементам в компонентах, о которых мы говорили ранее.

Партиалы объектов и страниц

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

Объекты — я применяю их при использовании элементов, компонентов или последовательностей, чьи стили не на 100% одинаковы. Я добавляю другое имя класса к элементу, компоненту или последовательности — в дополнение к его элементу, компоненту или классу последовательности — и это позволяет мне применять к нему различные стили. Имя класса начинается с ‘e-’ для представления объекта.

Мое эмпирическое правило заключается в том, что вы можете добавить только один объект в элемент / компонент / последовательность. Если есть другой случай, когда такой объект отличается от общего, лучше создать другой объект!

<section class="common-popup e-datepicker-popup"> </section>

Кроме этого, вы можете добавить столько классов CSS-утилит, сколько захотите.

<section class="common-popup e-datepicker-popup u-hide"> </section>

Страницы — каждая страница на вашем сайте может быть объектом. В этом случае класс должен быть добавлен к элементу body или к элементу main, который охватывает все. Имя класса должно начинаться с «p-», например: «p-homepage» или « p-news» и т. д…

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

<body class="p-homepage"></body>

Заключение

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

Автор: Elad Shechter

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

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