У frontend-разработчиков есть боль: 1. Огромные CSS файлы 2. Невозможно переиспользовать код 3. Сложности поддержки проектов 4. Склеивание и минификация файлов 5. Префиксы для css3 6. Работа со спрайтами 7. Невозможность использовать новые фичи javasccript И мы хотим поговорить об этом

1. КАК ЛЕНИВЫЕ
ФРОНТЕНДЫ
СЕБЕ ЖИЗНЬ
УПРОЩАЮТ
adn.agency

2. 2
Боль
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
4. Склеивание и минификация файлов
5. Префиксы для css3
6. Работа со спрайтами
7. Невозможность использовать новые фичи javasccript

3. 3
Препроцессоры.
Зачем эти
сложности?

4. 4Переменные

5. 5Вложенность

6. 6Миксины

7. 7Миксины с правилами
Результат выполнения

8. 8Импорты

9. 9
Проблемы, о которых
мы уже забыли
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов

10. 10
Немного о PostCSS
1. Это не препроцессор
2. Это не пост процессор
3. Это новый подход к работе с css

11. 11Autoprefixer
https://github.com/postcss/autoprefixer
Автоматически добавляет префиксы
Результат выполнения

12. 12Short
https://github.com/jonathantneal/postcss-short
Мощный PostCSS плагин, позволяющий
сокращать написание CSS кода.
Результат выполнения

13. 13CSS Next
http://cssnext.io/
Позволяет использовать возможности CSS-4
уже сегодня.
Кастомные селекторы
Улучшенный синтаксис медиа-
запрос

14. 14CSS Next
http://cssnext.io/
Позволяет использовать 10 различных CSS
фильтров:
‣ grayscale
‣ sepia
‣ saturate
‣ hue-rotate
‣ invert
‣ opacity
‣ brightness
‣ contrast
‣ blur
‣ drop-shadow
.blur {
filter: blur(4px);
}

15. 15Tusk Runner’ы
http://gruntjs.com/ http://gulpjs.com/

16. 16package.json
Список зависимостей, которые нужно
установить

17. 17Gruntfile
Файл конфигурации
http://gruntjs.com/
Подключение
плагинов
Конфигурация каждой
задачи

18. 18grunt-contrib-less
Компилирует LESS файлы в CSS
http://gruntjs.com/

19. 19grunt-contrib-cssmin
Минифицирует CSS файлы
http://gruntjs.com/

20. 20grunt-contrib-concat
Объединяют несколько JS файлов
http://gruntjs.com/

21. 21grunt-contrib-uglify
Минифицирует JS файл
http://gruntjs.com/

22. 22grunt-contrib-watch
Отслеживает изменения файлов и запускает нужные задачи
https://github.com/gruntjs/grunt-contrib-watch
Определяем отслеживание
изменения LESS файлов
и запускаем необходимые
задачи

23. 23grunt-svg-sprite
Генерирует SVG спрайт
https://www.npmjs.com/package/grunt-svg-sprite

24. 24grunt-spritesmith
Генерирует PNG спрайт
https://github.com/Ensighten/grunt-spritesmith

25. 25Результат сборки спрайта
http://gruntjs.com/

26. 26grunt-babel
Позволяет использовать ES6
https://github.com/babel/grunt-babel

27. 27
Еще раз вспомним для чего это все нужно
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
4. Склеивание и минификация файлов
5. Префиксы для css3
6. Работа со спрайтами
7. Невозможность использовать новые фичи javasccript

28. 28
БЭМ - что это
и зачем?

29. 29
БЭМ - что это и зачем?
1. Разработчик должен понимать свой код и код любого
программиста в команде БЭМ-проекта.
2. Любой блок кода может быть использован повторно
3. Работая в одной команде, разработчики, менеджеры, дизайнеры
и верстальщики должны называть одни и те же вещи одинаково.
4. Команды могут обмениваться специалистами для реализации
какой-то конкретной функциональности.
5. Порог входа при переходе на новый проект должен быть снижен
за счет одинаковой структуры организации всех БЭМ-проектов и
одинаковых правил именования всех сущностей.

30. 30Структура элемента
Самый высокий уровень абстракции
компонента.
.block
Дочерний элемент .block помогающий
поддерживать его целостность.
.block__element
Другое состояние
или версия .block.
.block--modifier

31. 31БЭМ vs Каскадирование
Специфичность данного
селектора очень велика.
Как обрабатывает «машина» код
в этом случае: сначала все <a>,
потом <a>, вложенные в <li>
и так далее.
«Выравниваем» специфичность
между элементами DOM.
Обработка <a class="top-menu-
item__link">. То есть браузер
сразу же нашел ссылку
по селектору .top-menu-
item__link.

32. 32
Не заморачивайтесь,
упрощайте процесс
разработки

33. Технический директор ADN digital studio
Михаил Полев
mihail@adn.agency
Спасибо
за внимание!
goo.gl/948xcb
Ссылка на презентацию:

34. 34
hi@adn.agency