## BEM **Block - Element - Modifier** - методологія іменування класів. ### Block Незалежна частина інтерфейсу: `card`, `navbar`, `login-form`. ```css .card { padding: 24px; border-radius: 12px; } ``` ### Element Частина блоку, яка не має сенсу окремо. Формат: `block__element`. ```html

Product title

Product description

``` ### Modifier Варіант блоку або елемента. Формат: `block--modifier`, `block__element--modifier`. ```html ``` ```css .button--primary { background: blue; color: white; } ``` ### Приклад ```html

MacBook Pro

``` **Плюси:** зрозуміла структура, немає конфліктів, добре для великих CSS-файлів. **Мінуси:** довгі назви, у React/Next.js часто замінюється CSS Modules або Tailwind. --- ## Utility classes Маленькі класи з однією дією: ```css .text-center { text-align: center; } .mt-4 { margin-top: 16px; } .flex { display: flex; } ``` ```html

Hello

``` Комбінуєш утиліти замість окремого класу на кожен layout. **Плюси:** швидка розробка, менше кастомного CSS, однакові spacing/color. **Мінуси:** довгий HTML/JSX, важче читати початківцям. --- ## Component classes Класи для цілого компонента: ```css .pricing-card { padding: 32px; border-radius: 16px; } .pricing-card__title { font-size: 24px; } ``` Добре для кнопок, карток, модалок, форм, навігації. ### Utility vs component ```html ``` | Підхід | Коли | |--------|------| | Utility | spacing, layout, typography, Tailwind, прототип | | Component | повторювані UI, складні стилі, дизайн-система |

Naming & Organization

Naming & Organization