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

Для организации стилей в проекте использую методологию BEM (Block-Element-Modifier) в сочетании с SCSS для удобства.

1. Структура папок:
   text

   Копировать

   /styles  
   ├── /base       // глобальные стили, сбросы, переменные  
   ├── /components // стили компонентов (BEM-блоки)  
   ├── /layout     // общие layout-стили (шапка, подвал)  
   ├── /utils      // миксины, функции, утилитарные классы  
   └── main.scss   // точка входа  

2. Пример SCSS с BEM:

   scss

   Копировать

   // components/button.scss
   .button {
     padding: 10px 20px;
     &--primary { background: blue; }
     &__icon { margin-right: 8px; }
   }

3. Подходы:

   • CSS-модули для изоляции стилей в React/Vue.
   • Переменные (_variables.scss) для цветов, отступов.
   • Миксины для повторяющихся паттернов (например, медиазапросы).

Важно избегать глобальных стилей, кроме базовых (например, normalize.css).