Существует ряд признанных методологий для форматирования вашего CSS. В конечном итоге вам решать, что вам удобнее писать, но это поможет вам управлять вашим CSS для более крупных и сложных проектов. Не то чтобы это имеет значение, но я склонен использовать комбинацию BEM и SMACSS.
BEM - это очень полезное, мощное и простое соглашение об именах, позволяющее сделать ваш интерфейсный код более легким для чтения и понимания, с ним легче работать, легче масштабировать, более надежным и понятным и намного более строгим.
Блок
Автономная сущность, которая сама по себе значима, например:
header, container, menu, checkbox, input
Элемент
Части блока и не имеют самостоятельного значения. Они семантически привязаны к его блоку:
menu item, list item, checkbox caption, header title
Модификатор
Флаги на блоках или элементах. Используйте их, чтобы изменить внешний вид или поведение:
disabled, highlighted, checked, fixed, size big, color yellow
Целью OOCSS является поощрение повторного использования кода и, в конечном итоге, более быстрых и эффективных таблиц стилей, которые легче добавлять и поддерживать.
OOCSS основывается на двух основных принципах:
- Отделение структуры от кожи
Это означает определять повторяющиеся визуальные элементы (например, стили фона и границ) как отдельные «скины», которые можно смешивать и сочетать с различными объектами, чтобы получить большое количество визуального разнообразия без большого количества кода. См. Объект модуля и его скины.
- Разделение контейнеров и содержимого
По сути, это означает «редко использовать стили, зависящие от местоположения». Объект должен выглядеть одинаково, независимо от того, где вы его положили. Поэтому вместо того, чтобы стилизовать конкретное с помощью .myObject h2 {...}, создайте и примените класс, описывающий рассматриваемый вопрос, например.
Это дает вам уверенность в том, что: (1) все не классифицированные s будут выглядеть
тот же самый; (2) все элементы с классом категории (называется миксин)
будет выглядеть так же; и 3) вам не нужно создавать стиль переопределения
для случая, когда вы действительно хотите, чтобы .myObject h2 выглядел как
нормальный.
SMACSS - это способ исследовать ваш процесс проектирования и способ приспособить эти жесткие рамки к гибкому мыслительному процессу. Это попытка документировать последовательный подход к разработке сайта при использовании CSS.
В основе SMACSS лежит классификация. По категоризации CSS
правила, мы начинаем видеть шаблоны и можем определить лучшие практики вокруг
каждый из этих шаблонов.
Существует пять типов категорий:
/* Base */
/* Layout */
/* Modules */
/* State */
/* Theme */
Base
Содержит стили элементов сброса и элементов по умолчанию. Он также может иметь базовые стили для элементов управления, таких как кнопки, сетки и т. Д., Которые могут быть перезаписаны позже в документе при определенных обстоятельствах.
Компоновка
Содержит всю навигацию, хлебные крошки, карты сайта и т. Д. И т. Д.
Модули
Содержит специфичные для области стили, такие как стили контактной формы, плитки домашней страницы, перечень товаров и т. Д. И т. Д. И т. Д.
Состояние
Содержит классы состояний, такие как isSelected, isActive, hasError, wasSuccessful и т. Д. И т. Д.
Тема
Содержит все стили, связанные с тематикой.
Здесь слишком много подробностей, но взгляните и на эти другие: