Как организуешь стили проекта?

Организация стилей в современном frontend-проекте

Я организую стили, сочетая методологию BEM с CSS-модулями и CSS-in-JS решениями, выбирая подход в зависимости от масштаба и типа проекта. Вот моя комплексная система:

Архитектурные подходы

1. Модульная структура по feature-based принципу:

styles/
├── base/           # Глобальные стили, сброс, переменные
│   ├── _reset.scss
│   ├── _variables.scss
│   └── _typography.scss
├── layout/         # Компоненты макета (header, footer, grid)
│   ├── _header.scss
│   └── _grid-system.scss
├── components/     # Переиспользуемые UI-компоненты
│   ├── Button/
│   │   ├── Button.module.scss
│   │   └── Button.tsx
│   └── Modal/
├── features/       # Стили для бизнес-логики
│   ├── auth/
│   └── dashboard/
├── themes/         # Тематизация
│   ├── _light.scss
│   └── _dark.scss
└── utils/          # Миксины, функции, утилиты

2. Ключевые технологии и их применение:

// Пример: CSS-модуль с SCSS для компонента Button
// Button.module.scss
@import '../../utils/mixins';

.button {
  @include flex-center;
  padding: var(--spacing-md);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  
  &--large {
    padding: var(--spacing-lg);
    font-size: var(--font-size-lg);
  }
  
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

// Использование в React-компоненте
import styles from './Button.module.scss';

const Button = ({ size, disabled }) => (
  <button 
    className={`
      ${styles.button}
      ${size === 'large' ? styles['button--large'] : ''}
      ${disabled ? styles['button--disabled'] : ''}
    `}
  >
    Click me
  </button>
);

Методологии именования

Базовые принципы BEM с адаптацией:

/* Традиционный BEM */
.block__element--modifier { ... }

/* С использованием CSS-модулей (автоматическая генерация) */
.Button_primary_abc123 { ... }

/* Моя адаптация для сложных компонентов */
.product-card { /* Блок */ }
.product-card__image { /* Элемент */ }
.product-card--featured { /* Модификатор блока */ }
.product-card__price--discounted { /* Модификатор элемента */ }

Современные практики

3. CSS-in-JS для динамических стилей:

// Использование Styled Components или Emotion
import styled from '@emotion/styled';

const DynamicCard = styled.div`
  background: ${props => props.isActive ? '#4CAF50' : '#f5f5f5'};
  padding: ${({ theme }) => theme.spacing.lg};
  transition: all 0.3s ${({ theme }) => theme.transitions.easeInOut};
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: ${({ theme }) => theme.shadows.md};
  }
`;

// Создание Theme Provider для глобальных переменных
const theme = {
  colors: {
    primary: '#2196F3',
    secondary: '#FF4081',
  },
  spacing: { xs: 4, sm: 8, md: 16, lg: 32 },
};

Критические правила организации

Система приоритетов:

1. CSS Custom Properties для тем и глобальных значений
2. Utility-классы для margin/padding (но без переусердствования)
3. Компонентные стили с локальной областью видимости
4. Глобальные стилы только для базовых элементов

Процесс разработки:

// Шаг 1: Определение design tokens
:root {
  --color-primary: #007bff;
  --color-secondary: #6c757d;
  --spacing-unit: 8px;
  --breakpoint-md: 768px;
}

// Шаг 2: Создание утилитарных миксинов
@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// Шаг 3: Компонент-ориентированная разработка
.accordion {
  border: 1px solid var(--color-border);
  
  @include respond-to(var(--breakpoint-md)) {
    display: flex;
  }
  
  &__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    
    &--expanded {
      max-height: 500px;
    }
  }
}

Инструменты и сборка

Мой стек для управления стилями:

• PostCSS с автопрефиксером и cssnano для минификации
• Stylelint с конфигом порядка свойств
• PurgeCSS для удаления неиспользуемых стилей в production
• CSS Modules с TypeScript для типобезопасности

// Пример конфигурации Stylelint
{
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-rational-order"
  ],
  "rules": {
    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$",
    "no-descending-specificity": null
  }
}

Адаптивность и производительность

Критически важные аспекты:

• Mobile-first подход в медиа-запросах
• Ленивая загрузка CSS для редко используемых компонентов
• Critical CSS extraction для первых экранов
• CSS Grid/Flexbox вместо флоатов и позиционирования

Такой подход обеспечивает масштабируемость, поддерживаемость и производительность. CSS-модули предотвращают конфликты имён, BEM обеспечивает понятную структуру, а CSS-in-JS позволяет создавать динамические интерфейсы. Ключевое правило: стили должны жить как можно ближе к соответствующим компонентам, но глобальные design tokens должны быть централизованы.