В чем разница между глобальными и модульными стилями?

Разница между глобальными и модульными стилями

В современной разработке два подхода к организации CSS: глобальные стили и модульные стили (CSS Modules). Они решают проблему масштабирования и переиспользования стилей по-разному.

Глобальные стили

Глобальные стили — это CSS, который применяется ко всему приложению. Все селекторы находятся в глобальной область видимости и могут конфликтовать друг с другом.

/* styles.css (глобальный файл) */
.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 4px;
}

.card {
  padding: 20px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

<!-- HTML в любом компоненте -->
<div class="card">
  <h1 class="title">Заголовок</h1>
  <button class="button">Нажми меня</button>
</div>

Характеристики глобальных стилей:

• Все селекторы в глобальной область видимости
• Возможны конфликты имён: разные компоненты могут использовать одно имя класса
• Просто использовать: просто добавь класс
• Полная контроль: видишь все стили в одном месте
• Сложно масштабировать: на больших проектах имена классов становятся уникальными вручную
• Неэффективно: неиспользуемые стили остаются в коде

Модульные стили (CSS Modules)

CSS Modules — это подход, при котором каждый файл CSS изолирован и применяется только к компоненту, который его импортирует. Класс автоматически преобразуется в уникальное имя.

/* Button.module.css */
.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 4px;
}

.button:hover {
  background-color: darkblue;
}

.buttonPrimary {
  background-color: green;
}

.buttonSecondary {
  background-color: gray;
}

// Button.jsx
import styles from './Button.module.css';

function Button({ variant = 'primary' }) {
  const buttonClass = variant === 'secondary'
    ? styles.buttonSecondary
    : styles.buttonPrimary;

  return <button className={`${styles.button} ${buttonClass}`}>Нажми</button>;
}

// Скомпилируется в HTML примерно так:
// <button class="Button_button__3a4f8 Button_buttonPrimary__7x2k1">Нажми</button>

Характеристики CSS Modules:

• Локальная область видимости: каждый модуль изолирован
• Автоматическое преобразование имён: классы становятся уникальными
• Нет конфликтов: разные компоненты могут использовать одно имя
• Требует импорта: нужно явно импортировать стили
• Масштабируется хорошо: легко добавлять новые компоненты
• Типизация: в TypeScript можно типизировать стили

Сравнительная таблица

Практический пример

Глобальные стили:

// App.js
import './styles.css';

function App() {
  return (
    <div>
      <button class="button">Кнопка 1</button>
      <div class="card">
        <h1 class="title">Заголовок</h1>
      </div>
    </div>
  );
}

CSS Modules:

// Button.jsx
import styles from './Button.module.css';

function Button() {
  return <button className={styles.button}>Кнопка 1</button>;
}

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

function Card() {
  return (
    <div className={styles.card}>
      <h1 className={styles.title}>Заголовок</h1>
    </div>
  );
}

Альтернативы

Tailwind CSS (утилитарный подход):

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Нажми
</button>

Styled Components (CSS-in-JS):

import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 4px;

  &:hover {
    background-color: darkblue;
  }
`;

function Button() {
  return <StyledButton>Нажми</StyledButton>;
}

Когда использовать

Глобальные стили для:

• Базовых стилей (reset, typography, colors)
• Проектов с одной архитектурой
• Когда нужна быстрая разработка
• Переиспользуемых компонентов (button, input)

CSS Modules для:

• Больших проектов с много компонентов
• Когда важна изоляция стилей
• Сложных компонентов со своей логикой
• Когда нужна гарантия отсутствия конфликтов

Tailwind CSS для:

• Быстрого прототипирования
• Когда хочешь использовать утилиты
• Проектов с дизайн-системой
• Когда нужна быстрая разработка

Главная разница

Глобальные стили — все классы находятся в одном пространстве имён, что может привести к конфликтам, но просто использовать.

CSS Modules — каждый модуль изолирован, автоматически генерируются уникальные имена, что исключает конфликты, но требует больше кода.

Модульные стили лучше для масштабирования и команда, глобальные лучше для быстрой разработки.