adn@it'summer - Как ленивые фронтенды себе жизнь упрощают

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

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);

}

15Tusk Runner’ы

http://gruntjs.com/ http://gulpjs.com/

16package.json

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

17Gruntfile

Файл конфигурации

http://gruntjs.com/

Подключение плагинов

Конфигурация каждойзадачи

18grunt-contrib-less

Компилирует LESS файлы в CSS

http://gruntjs.com/

19grunt-contrib-cssmin

Минифицирует CSS файлы

http://gruntjs.com/

20grunt-contrib-concat

Объединяют несколько JS файлов

http://gruntjs.com/

21grunt-contrib-uglify

Минифицирует JS файл

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

25Результат сборки спрайта

http://gruntjs.com/

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

Михаил Полев mihail@adn.agency

Спасибо за внимание!

goo.gl/948xcb

Ссылка на презентацию:

34

hi@adn.agency