Совместная работа над стилями: Git, BEM, Figma-токены, Storybook

Почему совместная работа над стилями — это важно? 🤝

Представьте: три разработчика правят один CSS-файл, дизайнер обновляет макеты, а менеджер хочет «просто поменять кнопку». Без правил — это хаос! Вот инструменты, которые спасут ваш проект:

Git: контроль версий для стилей

Git — не только для кода. CSS-файлы тоже должны быть под его защитой:

/* Плохо: */
.button { background: red; }

/* Хорошо (осмысленные коммиты): */
.feature/add-primary-button {
  .button { 
    background: var(--color-primary); 
  }
}

💡 Совет Данилы Бежина: Делите изменения на атомарные коммиты. "Исправил отступы в хедере" — лучше, чем "Поправил стили".

BEM: говорим на одном языке

BEM (Блок-Элемент-Модификатор) — это как LEGO для CSS. Пример:

/* Блок */
.card { 
  border: 1px solid #eee; 
}

/* Элемент */
.card__title { 
  font-size: 1.2rem; 
}

/* Модификатор */
.card--featured {
  border-color: gold;
}

Правила BEM:

• __ — разделитель элемента (card__button).
• -- — модификатор (button--disabled).
• Никаких каскадов глубже 2 уровней!

🔥 Фишка: BEM + Sass = мощь. Используйте & для вложенности:

.card {
  &__title { color: blue; }
  &--featured { border-width: 2px; }
}

Figma-токены: дизайн-система в коде

Figma Tokens Plugin превращает цвета, шрифты и отступы в готовый CSS/SCSS.

1. Настройте токены в Figma:

{
   "color": {
     "primary": "#4CAF50"
   }
}

2. Экспортируйте в код:

:root {
   --color-primary: #4CAF50;
}

Плюсы:

• Дизайнер изменил цвет → токены обновляются автоматически.
• Нет расхождений между макетом и вёрсткой.

Storybook: UI-библиотека для команды

Storybook — это каталог компонентов, где можно:

• Тестировать изолированные компоненты.
• Документировать правила использования.

Пример для кнопки:

// Button.stories.js
export const Primary = () => (
  <Button variant="primary">Click me</Button>
);

Что добавить в Storybook:

• Все состояния (hover, disabled).
• Пропсы и их типы.
• Примеры из реального интерфейса.

Как это работает вместе?

Идеальный поток:

1. Дизайнер создаёт токены в Figma.
2. Разработчик импортирует их в CSS-переменные.
3. Компоненты пишутся по BEM и тестируются в Storybook.
4. Вся история изменений — в Git.

Реальный пример:

// Используем Figma-токены и BEM
.button {
  background: var(--color-primary);
  &--disabled {
    opacity: 0.5;
  }
}

Итог: 4 столба порядка

1. Git — контроль изменений.
2. BEM — именование без боли.
3. Figma Tokens — дизайн → код за минуты.
4. Storybook — документация и тесты.

🎯 Главное: инструменты экономят часы рутинной работы. Попробуйте внедрить хотя бы один — и команда скажет вам спасибо!