WebBurBurBur/lec/3.md

LEC 3

Визуальные паттерны

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

Дизайн-паттерны

CSS - наше всё

Идеология

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

VS

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

Семантическая идеалогия

Для разных классов разные css, но с одинаковым описанием

Функциональная идеалогия

Один класс - один фюррер стиль

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 файл, где классы и анимации по умолчанию находятся в локальной области видимости

/* styles.css */
.title {
    .background-color: red
}