# LEC 3

## Визуальные паттерны
- Форма авторизации
- Grid layout (960gridsystem) - footer, header и прочие штуки
- Mediaobject - картинка, сопровождаемая текстовой информацией

## Дизайн-паттерны
CSS - наше всё

## Идеология

- WET (Write Everything Twice) - семантичная

VS

- DRY (Don't Repeat Yourself) - функциональная

### Семантическая идеалогия
Для разных классов разные css, но с одинаковым описанием
<!-- ```html
<div class="app">
    <div class="hf"></div>
``` -->
### Функциональная идеалогия
Один класс - один ~~фюррер~~ стиль

## CSS-методологии
Набор правил для оформления CSS-стилей:
- правило оформления стилей
- группировка стилей по файлам/папкам
- селекторы + папки

### OOCSS (ООП, но CSS)
База:
1. Уход от родительских селекторов
2. Разделение структуры от представления

Из плюсов:
- DRY (меньше кода)

Из минусов:
- Сложно это всё поддерживать

### SMACSS (Scalable and Modular Architecture for CSS)
База:
1. 5 китов:  Base - базовые стили элементов (селекторы тегов и атрибуты), Layout - базовые макеты страниц (селекторы по идентификаторам), Module - переиспользуемые элементы и блоки (классы), State - перерисовка элемента в зависимости от состояния, Theme - настройка темы

### BEM
База:
1. Базовые примитивы: блок, элемент, модификатор
2. Независимость блоков
3. Вложенность элементов блока < 1 (элементы не вкладываются друг в друга)
4. На DOM элементе мб > 1 блока
5. "Слойная" архитектура

### Atomic CSS
База:
1. Для каждого CSS-свойтсва - отдельный класс
2. Значение свойства - внутри класса

Из плюсов:
- DRY

Из минусов:
- Несемантичный CSS
- "Загрязнение" HTML стилями

### Axiomatic CSS
База:
1. Селекторы по тегам

### CSS modules
CSS файл, где классы и анимации по умолчанию находятся в локальной области видимости
```css
/* styles.css */
.title {
    .background-color: red
}
```