CSS-модульность: организация стилей в модульной структуре

🧩 Почему модульность — это спасение?

Когда проект растёт, CSS превращается в лапшу. Один файл styles.css на 5000 строк — это ад для поддержки. Модульность решает проблему:

• Изолированные стили — нет конфликтов имён классов
• Переиспользование — компоненты как конструктор Лего
• Читаемость — всё разложено по полочкам

💡 Вдохновение от Данилы Бежина: «Думайте о стилях как о микросервисах — каждый делает свою работу идеально».

🗂 Основные подходы к организации

1. По компонентам (Atomic Design)

src/styles/
├── components/
│   ├── button.css
│   ├── card.css
│   └── modal.css
├── base/          # Сброс и глобальные стили
└── utils/         # Переменные, миксины

Пример button.css:

.btn {
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
}

.btn--primary {
  background: var(--color-blue);
  color: white;
}

2. По страницам (для сложных проектов)

styles/
├── home/
│   ├── hero.css
│   └── features.css
└── about/
    ├── team.css
    └── history.css

🧪 CSS-модули на практике

Технология, где имена классов автоматически становятся уникальными. Идеально для React/Vue.

До (проблема):

.title { color: red; } /* Конфликт имён! */

После (решение):

import styles from './Card.module.css';

function Card() {
  return <h2 className={styles.title}>Безопасно!</h2>;
}

Компилятор преобразует это в:

<h2 class="Card_title__a1b2c">Безопасно!</h2>

⚡ Профит: Можно использовать простые имена вроде .title или .button без риска.

🎨 Переменные и миксины: суперсила

CSS-переменные (глобальные)

:root {
  --color-primary: #3a86ff;
  --border-radius: 8px;
}

.button {
  background: var(--color-primary);
  border-radius: var(--border-radius);
}

SCSS-миксины (для повторяющегося кода)

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero {
  @include flex-center;
  height: 100vh;
}

🛡 БЭМ vs CSS-модули

Выбор зависит от проекта: БЭМ хорош для vanilla-проектов, CSS-модули — для современных сборок.

🔥 Горячие советы

1. Именуйте осмысленно

• Плохо: .div-1, .red-box
• Хорошо: .user-card, .alert-warning

2. Держите стили рядом с компонентами

/components
├── Button
│   ├── Button.jsx
│   └── Button.module.css

3. Используйте stylelint — он поймает дубликаты и мертвый код.

4. Документируйте сложные компоненты в комментариях:

/* Карточка товара:  
 * - Отступы: 16px  
 * - Тень только при ховере  
 */
.product-card {
  padding: 16px;
  transition: box-shadow 0.2s;
}

🚀 Что дальше?

• Поэкспериментируйте с CSS-in-JS (Styled Components)
• Изучите Utility-first подход (Tailwind CSS)

Главное — начать делить стили на атомы сегодня, даже в маленьких проектах. Ваш будущий «я» скажет спасибо! ✨