Методология SMACSS

SMACSS (Scalable and Modular Architecture for CSS) - это методология, разработанная Джоном Оттенборо, которая предлагает подход к организации CSS-кода, чтобы сделать его более легким в поддержке и масштабируемым.

Основной принцип SMACSS заключается в разделении стилей на пять различных категорий: базовые стили, макеты, модули, состояния и темы

1. Базовые стили: Это основные стили, которые применяются к элементам по умолчанию. Они задают базовую типографику, цвета, ссылки и другие общие стили. Базовые стили должны быть максимально легкими и применять минимум классов.

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

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

4. Состояния: Эта категория определяет стили, которые применяются к модулям в определенных состояниях. Например, это может быть стиль, применяемый к активной кнопке, развернутому аккордеону или наведению на элемент. Состояния позволяют задавать различную визуальную обратную связь в ответ на действия пользователя.

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

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

Подробнее: https://smacss.com/