Один CSS-файл и границы правил

Назначение

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

Как это работает

Общие свойства документа, раскладку и конкретные компоненты удобно располагать логическими группами. Классы описывают назначение компонента, а повторяющиеся значения можно вынести в пользовательские свойства.

Пример

:root { --space: 1rem; --accent: #11694e; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; }
.card { padding: var(--space); border: 1px solid var(--accent); }
.card__title { margin-top: 0; }

Что должно получиться

Общие правила ограничены документом, а оформление карточки привязано к её классам. Пример показывает организацию файла, а не обязательную систему именования для любого проекта.

Граница применения и частая ошибка

Не создавайте отдельный файл на каждое правило только ради количества модулей. И не используйте глобальные селекторы div или span для оформления одного компонента на всех страницах.

Самостоятельная проверка

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

Связанные материалы

• Первая HTML-страница
• Публикация файлов
• Проверка перед публикацией