Ответ
В CSS классы лучше структурировать по методологии, например BEM (Block-Element-Modifier):
/* Блок */
.button {}
/* Элемент блока */
.button__icon {}
/* Модификатор */
.button--large {}Для контекстных стилей можно:
- Использовать атрибут
data-*для контекста:
[data-theme="dark"] .button {
background: #333;
}- Применять CSS-переменные для динамического изменения:
.button {
background: var(--button-bg, #eee);
}- В компонентных фреймворках (React/Vue) - передавать пропсы:
<Button theme="dark" />Главное - избегать слишком специфичных селекторов и поддерживать переиспользуемость.
Ответ 18+ 🔞
Да ты посмотри, какие приёмы, блядь! Ну прям как в аптеке, всё по полочкам, сука.
Вот смотри, чтобы твой CSS не превратился в свалку, где всё в одной куче и хуй поймёшь что к чему, есть такая методология — BEM. Суть проще, чем кажется, ёпта.
/* Это у тебя блок, самостоятельная хуйня, типа кнопка */
.button {}
/* А это элемент, который без блока — нихуя не существует. Как иконка внутри кнопки */
.button__icon {}
/* А это модификатор, чтоб ту же кнопку, но другую, сделать. Большую или красную */
.button--large {}Всё, блядь, логично: блок, его части и его состояния. Никакой ебалы с вложенностями по тридцать уровней.
А теперь, сука, самый сок. Допустим, тебе надо кнопку в тёмной теме покрасить. Как не обосраться?
*Вариант первый — через `data-атрибут.** Вешаешь на тело сайтаdata-theme="dark"` и пишешь стили контекстом. Удобно, наглядненько.
[data-theme="dark"] .button {
background: #333; /* Тёмненько, блядь */
}Вариант второй — CSS-переменные, мать их. Объявляешь где-то наверху --button-bg и подставляешь. Если переменной нет — используется значение по умолчанию после запятой. Гибко, блядь!
.button {
background: var(--button-bg, #eee); /* Бери --button-bg, а нет — будет #eee */
}Ну и третий, для модных ребят на React/Vue. Ты просто передаёшь пропсу, типа theme="dark", а внутри компонента кнопка сама подхватывает нужный класс или стили.
<Button theme="dark" /> // Ну тут, бля, и так понятноГлавное, запомни, чувак: не надо выёбываться со сверхсложными селекторами вроде .header > .nav > ul > li.active > a. Это пиздец, а не поддержка. Делай всё максимально переиспользуемым и плоским, как доска. Тогда и жить будет проще, и другим разработчикам не захочется тебя найти и ебать вилкой в глаз.