81 lines
2.8 KiB
Markdown
81 lines
2.8 KiB
Markdown
# 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
|
||
}
|
||
```
|