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

Как я стилизую страницы на проекте

Мой подход к стилизации строится на нескольких ключевых принципах: масштабируемость, переиспользование компонентов, следование дизайн-системе и оптимизация производительности. Конкретная реализация зависит от типа проекта, но общая архитектура выглядит следующим образом.

1. Выбор инструментов и методологии

Для большинства современных проектов я использую комбинацию CSS Modules или Styled Components вместе с Sass/SCSS для сложных проектов, либо Tailwind CSS для быстрой разработки и строгого соблюдения дизайн-системы.

/* Пример с CSS Modules (Button.module.css) */
.button {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

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

.buttonPrimary:hover {
  background-color: var(--color-primary-dark);
}

// Пример использования в компоненте
import styles from './Button.module.css';

const Button = ({ variant }) => {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      Click me
    </button>
  );
};

Для проектов с высокой степенью переиспользования компонентов (React/Vue) я предпочитаю Styled Components или Emotion, которые позволяют инкапсулировать стили непосредственно в компонент и динамически изменять их через пропсы.

// Пример со Styled Components
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  background-color: ${props => 
    props.variant === 'primary' ? '#007bff' : '#6c757d'};
  color: white;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: ${props =>
      props.variant === 'primary' ? '#0056b3' : '#545b62'};
  }
`;

const Button = ({ variant }) => {
  return <StyledButton variant={variant}>Click me</StyledButton>;
};

2. Организация стилей в проекте

Я строго разделяю стили по уровням:

• Глобальные стили (Global Styles): Настройка базовых переменных, reset.css, типографики. Здесь определяются CSS Custom Properties (переменные) для цветов, шрифтов, отступов.
• Стили компонентов (Component Styles): Инкапсулированы в модули или styled-components. Каждый компонент отвечает только за свои стили.
• Стили страниц/контейнеров (Page/Layout Styles): Управляют расположением компонентов на странице, специфичными для страницы отступами.

// Пример структуры SCSS проекта
// styles/
//   ├── _variables.scss      // Глобальные переменные
//   ├── _mixins.scss         // Миксины
//   ├── _reset.scss          // Reset стили
//   ├── _typography.scss     // Типографика
//   ├── components/          // Стили компонентов
//   │   ├── _button.scss
//   │   ├── _card.scss
//   ├── layouts/             // Стили layouts
//   │   ├── _header.scss
//   │   ├── _sidebar.scss
//   ├── pages/               // Стили страниц (если нужны)
//   │   ├── _home.scss
//   ├── main.scss            // Главный файл импорта

3. Работа с дизайн-системой и темизацией

Если проект использует дизайн-систему (например, Material UI, Ant Design или собственную), я интегрирую её компоненты и расширяю через переопределение стилей, соблюдая установленные правила. Для поддержки тематизации (dark/light mode) активно использую CSS переменные и контекст в React.

/* Глобальные переменные для темизации */
:root {
  --color-background: #ffffff;
  --color-text: #333333;
  --color-primary: #007bff;
  --spacing-unit: 8px;
}

[data-theme="dark"] {
  --color-background: #1a1a1a;
  --color-text: #f0f0f0;
  --color-primary: #0a58ca;
}

// React компонент, использующий переменные
const Card = styled.div`
  background-color: var(--color-background);
  color: var(--color-text);
  padding: calc(var(--spacing-unit) * 3);
  border-radius: 12px;
`;

4. Адаптивность и подходы к responsive design

Я предпочитаю mobile-first подход. Стили сначала пишусь для мобильных устройств, затем добавляются медиа-запросы для более широких экранов. Используются относительные единицы (rem, em, %, vw/vh) и flexbox/grid для создания адаптивных layouts.

.component {
  padding: 1rem; // Базовый отступ для mobile
  font-size: 1em;

  @media (min-width: 768px) {
    padding: 1.5rem; // Увеличение для tablet
  }

  @media (min-width: 1024px) {
    padding: 2rem; // Увеличение для desktop
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

5. Оптимизация производительности и порядка загрузки

• Минимизация глобальных стилей: Чем больше стилей инкапсулировано в компоненты, тем меньше глобального CSS.
• Избегание глубокой селекторной вложенности: Это повышает специфичность и может замедлить рендеринг.
• Критический CSS (Critical CSS): Для улучшения первого рендеринга (First Paint) я иногда внедряю минимально необходимые стили прямо в <head>.
• Использование современных CSS-свойств: Например, gap для flexbox/grid вместо margin, что часто производительнее.

6. Инструменты и процесс разработки

В процессе разработки я активно использую:

• CSS препроцессоры (Sass) для миксинов, функций и более удобной организации.
• Autoprefixer для автоматического добавления vendor prefixes.
• Stylelint для соблюдения консистентного код-стайла и поиска ошибок.
• Browser DevTools для инспектирования, debugging и проверки производительности (например, панель Performance или Rendering).

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