Lecture + practice

lec/3.md

@@ -0,0 +1,80 @@
+# 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
+}
+```