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
|
|
}
|
|
```
|