adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
TRANSCRIPT
КАК ЛЕНИВЫЕ ФРОНТЕНДЫ СЕБЕ ЖИЗНЬ УПРОЩАЮТ
adn.agency
2Боль
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
4. Склеивание и минификация файлов
5. Префиксы для css3
6. Работа со спрайтами
7. Невозможность использовать новые фичи javasccript
3
Препроцессоры. Зачем эти сложности?
4Переменные
5Вложенность
6Миксины
7Миксины с правилами
Результат выполнения
8Импорты
9Проблемы, о которых мы уже забыли
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
10Немного о PostCSS
1. Это не препроцессор
2. Это не пост процессор
3. Это новый подход к работе с css
11Autoprefixer
https://github.com/postcss/autoprefixer
Автоматически добавляет префиксы
Результат выполнения
12Short
https://github.com/jonathantneal/postcss-short
Мощный PostCSS плагин, позволяющий сокращать написание CSS кода.
Результат выполнения
13CSS Next
http://cssnext.io/
Позволяет использовать возможности CSS-4 уже сегодня.
Кастомные селекторы
Улучшенный синтаксис медиа-запрос
14CSS Next
http://cssnext.io/
Позволяет использовать 10 различных CSS фильтров:
‣ grayscale
‣ sepia
‣ saturate
‣ hue-rotate
‣ invert
‣ opacity
‣ brightness
‣ contrast
‣ blur
‣ drop-shadow
.blur {
filter: blur(4px);
}
16package.json
Список зависимостей, которые нужно установить
17Gruntfile
Файл конфигурации
http://gruntjs.com/
Подключение плагинов
Конфигурация каждойзадачи
22grunt-contrib-watch
Отслеживает изменения файлов и запускает нужные задачи
https://github.com/gruntjs/grunt-contrib-watch
Определяем отслеживание изменения LESS файлов и запускаем необходимые задачи
23grunt-svg-sprite
Генерирует SVG спрайт
https://www.npmjs.com/package/grunt-svg-sprite
24grunt-spritesmith
Генерирует PNG спрайт
https://github.com/Ensighten/grunt-spritesmith
26grunt-babel
Позволяет использовать ES6
https://github.com/babel/grunt-babel
27Еще раз вспомним для чего это все нужно
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
4. Склеивание и минификация файлов
5. Префиксы для css3
6. Работа со спрайтами
7. Невозможность использовать новые фичи javasccript
28
БЭМ - что это и зачем?
29БЭМ - что это и зачем?
1. Разработчик должен понимать свой код и код любого программиста в команде БЭМ-проекта.
2. Любой блок кода может быть использован повторно
3. Работая в одной команде, разработчики, менеджеры, дизайнеры и верстальщики должны называть одни и те же вещи одинаково.
4. Команды могут обмениваться специалистами для реализации какой-то конкретной функциональности.
5. Порог входа при переходе на новый проект должен быть снижен за счет одинаковой структуры организации всех БЭМ-проектов и одинаковых правил именования всех сущностей.
30Структура элемента
Самый высокий уровень абстракции компонента..block
Дочерний элемент .block помогающий поддерживать его целостность..block__element
Другое состояние или версия .block..block--modifier
31БЭМ vs Каскадирование
Специфичность данного селектора очень велика.
Как обрабатывает «машина» код в этом случае: сначала все <a>, потом <a>, вложенные в <li> и так далее.
«Выравниваем» специфичность между элементами DOM.
Обработка <a class="top-menu-item__link">. То есть браузер сразу же нашел ссылку по селектору .top-menu-item__link.
32
Не заморачивайтесь,упрощайте процесс разработки
Технический директор ADN digital studio
Михаил Полев [email protected]
Спасибо за внимание!
goo.gl/948xcb
Ссылка на презентацию:
