В Atomic Design подходе акцент делается на создание компонентов и их повторное использование, что позволяет избежать дублирования кода и улучшить управление стилями. Ваша задача заключается в том, чтобы создать компоненты, которые можно легко настраивать и изменять.
Для вашей ситуации, когда у .header .title и .footer .title разные цвета и отступы, вы можете использовать CSS-классы для определения стилей, а также модификаторы для изменения их внешнего вида в зависимости от контекста. Вот пример, как это можно сделать:
<header class="header">
<h1 class="title title--header">Заголовок</h1>
</header>
<footer class="footer">
<h1 class="title title--footer">Подвал</h1>
</footer>
.title {
/* Общие стили для всех заголовков */
font-size: 24px;
font-weight: bold;
margin: 16px 0;
}
.title--header {
color: blue; /* Цвет заголовка в шапке */
margin-top: 20px; /* Отступ для заголовка в шапке */
}
.title--footer {
color: green; /* Цвет заголовка в подвале */
margin-bottom: 20px; /* Отступ для заголовка в подвале */
}
Подходящие классы
В этом случае вы создаете основной класс .title, который содержит общие стили для всех заголовков, а затем добавляете модификаторы .title--header и .title--footer для настройки стилей в зависимости от контекста.
Преимущества
- Повторное использование: Вы можете переиспользовать общий класс .title для других заголовков, сохраняя при этом возможность настраивать их стили.
- Читаемость: Добавляя специальные модификаторы, вы делаете ваш код более понятным и улучшаете его поддержку.
- Гибкость: Легко добавлять новые контексты, если это потребуется, просто создавая новые модификаторы.
Таким образом, вы достигаете принципов Atomic Design, создавая модульные и настраиваемые компоненты.
