SMACSS — масштабируемая модульная архитектура css

SMACSS (Scalable and Modular Architecture for CSS) является набором практик созданных для построения более понятного, легко дополняемого кода CSS. Она помогает не применять ID для стилизация элементов и сократить уровень вложенности элементов насколько это возможно. Главная идея этой философии может быть категоризирована по следующими понятиями: основа, разметка, модули, состояния и темы. Структурирование CSS согласно с этими категориями и следуя определенным правилам именвоания, используя эти категории, превращает SMACSS в читаемый и моментально наполненный смыслом код. Это уберегает от создания имен классов, которые ассоциируются со стилями внутри них.

• Основа: нет имен (базовые элементы, без классов)
• Разметка: .layout, .grid, .grid-column, .grid-column.five.columns
• Модули: .btn (название модуля), .btn-default, .btn-calltoaction; .modal, .modal-header
• Состояние: .is-hidden, .is-active (подразумеваются триггерные JavaScript-изменения классов)
• Тема: .theme-background, .theme-border, .font-1, .font-2