Парадигмы организации вашего CSS в 2021 году
Недавно я посетил конференцию An Event Apart о последних достижениях в дизайне, UX и разработке, и выступление Николь Салливан вдохновило меня на более глубокое изучение структуры CSS и некоторых преобладающих парадигм. Цель этого сообщения в блоге - поделиться с вами наиболее известной структурой и организационными парадигмами CSS и, надеюсь, дать вам высокоуровневое объяснение того, как они могут работать вместе или независимо, чтобы помочь вам повысить уровень вашего CSS.
В этом посте я хочу раскрыть следующие парадигмы:
- SMACSS
- OOCSS
- БЭМ
На протяжении всей статьи я буду ссылаться на репозиторий Github под названием Holy Grail, который является живым примером этих концепций. Я настоятельно рекомендую открыть это репо, а также живой сайт и следить за тем, как вы читаете этот пост. Это сделает многие концепции более ясными, хотя бы за счет повторения.
Ниже вы можете увидеть действующий сайт, который те люди, которые создали слева, сопровождаемые справа моими инструментами разработчика, открывают на вкладке источники, которая позволяет мне просматривать загруженный CSS. каждую страницу. На сайте есть отдельная страница, демонстрирующая каждую из концепций, которые я собираюсь объяснить.
SMACSS
SMACSS означает Масштабируемая и модульная архитектура для CSS. Это (бесплатная) книга и методика написания CSS, созданная Джонатаном Снуком. Его наиболее важным и влиятельным аспектом является его организационная система, которая предназначена для предоставления набора сегментов, в которые должен быть организован CSS. Чтобы узнать больше, посетите сайт SMACSS и прочтите или закажите книгу там.
Основные организационные сегменты, определенные в SMACSS, - это макеты и модули. Родительская папка для Layout определяет сетки, адаптивные фреймворки, оболочки и желоба. Родительская папка для «Модулей» содержит большую часть CSS сайта, разбитых на логические единицы, обычно это те же самые единицы, которые называются «объектами» в OOCSS и «Блоками» в БЭМ (мы рассмотрим это позже).
Пример проекта после SMACSS может выглядеть так:
Root
├── Layouts
│ └── grid.css
├── Modules
│ ├── header.css
│ ├── footer.css
│ └── card.css
├── Themes
│ ├── dark.css
│ └── light.css
└── Base
└── variables.css
OOCSS
OOCSS означает объектно-ориентированный CSS, и для меня это лучше всего понимается в контексте объектно-ориентированного программирования: в Javascript, например, объекты позволяют вам инкапсулировать ваш код различными способами, создавая переменные, которые существуют только в контексте объектов, или используя Закрытие для сохранения набора переменных для повторного использования во время выполнения функции.
OOCSS фокусируется на гибких, модульных, заменяемых компонентах, которые делают одно хорошо. OOCSS фокусируется на принципе единой ответственности, разделении ответственности и многих других фундаментальных концепциях объектно-ориентированного программирования.
По сути, речь идет о создании родительского класса, который определяет модуль CSS, а затем об использовании нужного уровня специфичности для определения стилей в этом компоненте. Возьмем пример:
В приведенном выше примере нижний колонтитул является модулем: он определяет определенный (многократно используемый) блок стилей, прикрепленных к разметке. Элементы, которые могут быть созданы в нижнем колонтитуле, также определяются с помощью классов, что создает нужный уровень специфичности для использования стилей нижнего колонтитула в другой разметке.
Подконцепции OOCSS следующие:
Структура против кожи
Этот принцип объектно-ориентированного CSS гласит: «отделите основные стили представления от стилей, специфичных для конкретного экземпляра». В приведенном ниже примере вы можете видеть, что у меня есть две кнопки, которые должны вести себя как кнопки (выравнивание текста должно быть по центру, у него должен быть радиус границы)
Контейнер против содержимого
Эта концепция OOCSS гласит: «Не используйте стили, зависящие от местоположения». Сделайте свои стили применимыми где угодно, в отличие от привязки к конкретному варианту использования или фрагменту HTML. давайте посмотрим на пример:
В приведенном выше примере мы разрешаем повторно использовать стиль заголовка навигации независимо от присутствующего HTML (это может быть h2, h3, h6, и мы все равно можем повторно использовать наши стили).
Презентационные и семантические имена классов
OOCSS не занимает позицию по сравнению с именами презентационных и семантических классов, но вместо этого оставляет это на усмотрение разработчика, когда использовать тот или другой.
БЭМ
БЭМ - это конкретное конкретное приложение OOCSS. БЭМ расшифровывается как блочный модификатор элемента и описывает шаблон для наименования имен классов объектов CSS. В описании ниже я буду использовать традиционную форму БЭМ, лучше всего описанную в сообщении CSS Wizardry под названием MindBEMding. Есть много разновидностей БЭМ, которые вы можете исследовать здесь, если вам интересно.
По сути, каждый БЭМ-класс начинается с блока - имени объекта. Начнем с .byline. Затем для дочерних элементов этого блока вы добавляете элемент, разделяя его двумя символами подчеркивания: .byline__name. Наконец, вы можете изменить любой класс (блок или элемент), добавив модификатор, разделенный двумя дефисами: .byline--expanded.
.byline {}
.byline__name {}
.byline__title {}
.byline__picture {}
.byline--expanded {}
.byline--expanded__bio {}Вот предыдущий пример нижнего колонтитула, переписанный с синтаксисом БЭМ:
Использование этих концепций в тандеме
Как вы уже догадались, эти концепции вовсе не исключают друг друга. SMACSS фактически встраивает некоторые концепции BEM и OOCSS в файловую структуру, а BEM на самом деле является подмножеством или расширением OOCSS. Поэтому сочетание этих концепций является очень естественным и симбиотическим. Вот пример файловой структуры, объединяющей SMACSS и BEM / OOCSS в одном.
_layout.css
В зависимости от сложности сайта у нас, скорее всего, будет отдельная папка для верстки. Здесь будут жить сетки, адаптивные фреймворки, оболочки и т. Д.
_modules.css
Включает определения наших модулей, блоков или объектов. Цель состоит в том, чтобы здесь было как можно больше кода, что сделало бы его гибким и многоразовым. Этот файл будет просто списком модулей, определенных (и задокументированных) один за другим. Примером CSS-файла в этой папке может быть footer.css, содержащий стили уровня блока для модуля нижнего колонтитула, за которым мы следили в этой статье.
_other.css
Название этой части может быть разным, но, по сути, это весь код, который не подходит для _base, _layout или _modules. Код, который мы просто не могли сделать модульным; клей между модулями; макеты верхнего уровня; и т.п.
_base.css
Включает normalize.css, а также устанавливает стили для базовых элементов: html, body, a, ul, li и т. Д.
Спасибо за чтение, я надеюсь, что часть информации в этой статье была для вас полезной, увидимся в следующий раз!
