Антон Тимчук Front-end developer компанії stfalcon.com — Методології CSS, особливості переваг та недоліки — Оптимізація завантаження CSS — Огляд інструментів для оптимізації роботи з CSS

1. Работа с CSS
Методологии и инструменты

2. Работа с CSS
Проблемы CSS
Подходы к организации CSS
Оптимизация CSS
Инструменты и автоматизация

3. Проблемы CSS

4. Проблемы CSS
Повторения кода
h2 {font-size: 1em}
article h2 {font-size: 1.2em}
.cart section h2 {font-size: 2em}

5. Проблемы CSS
Повторения кода
Возможны сайд-эффекты
h2 {font-size: 1em; color: #000}
article h2 {font-size: 1.2em}
.cart section h2 {font-size: 2em}

6. Проблемы CSS
Повторения кода
Возможны сайд-эффекты
Сложности с поддержкой на больших проектах

7. Поддержка и развитие

8. Проблемы CSS
Повторения кода
Возможны сайд-эффекты.
Сложности с поддержкой на больших проектах
Тестирование

9. Подходы к написанию
CSS

10. ul {……}
ul li {……}
ul li a {……}
Что изменилось за
последние годы?

11. ul {……}
ul li {……}
ul li a {……}
акцент был на свойства
Что изменилось?

12. ul {……}
ul li {……}
ul li a {……}
больше внимания уделено “архитектуре”
Что изменилось?

13. PLAIN CSS

14. Plain CSS
.left-sidebar {font-size: 14px; float: left}
.right-sidebar {font-size: 14px; float: right}
<div class=‘left-sidebar’></div>
<div class=‘right-sidebar’></div>

15. Plain CSS
Нет системы именования селекторов
Много повторов кода
Сложности в поддержке и развитии
Огромные файлы CSS
Невозможно повторно использовать код
Много наследования классов

16. OOCSS
object-oriented css

17. OOCSS
Разделение структуры и оформления
Разделение контейнера и контента
Модульность. Web-components - далеко.
Уменьшение вложенности селекторов
Возможно реиспользовать код

18. OOCSS компоненты
Сетки
Списки и заголовки
Кнопки
Rows (колонки)
Heading 1
Heading 2
Heading 3
Heading 4

19. OOCSS
.sidebar {font-size: 14px}
.to-right {font-size: 14px; float: right}
<div class=‘sidebar’></div>
<div class=‘sidebar to-right’></div>

20. OOCSS
.padding-10 {padding: 10px}
.padding-30 {padding: 30px}
<div class=‘sidebar padding-30’></div>
<div class=‘sidebar padding-10’></div>

21. Группировка классов
<div class=‘[btn btn-primary] [small-text text-center]’></div>

22. BEM
block-element-modifier

23. BEM (CSS)
Блок - элемент страницы со своей разметкой и стилями,
функциями
Элемент - часть блока не имеющая без него смысла.
Модификатор - фича модифицирующая блок, элемент
Все элементы блока начинаются с его имени
<div class=‘btn btn——orange’>
<div class=‘btn__price’>$9.99</div>
<div class=‘btn__text’>buy now</div>
</div>
btn {…} – блок
btn__price{…}- элемент
btn——orange{…} - модификатор

24. BEM плюсы
Отсутствие каскадирование
Web-componetns - ну почти.
Пространство имен и правила именования
Возможность реиспользовать код
Легче поддерживать и масштабировать
Снижение сложности кода + наглядность
+ Сборщики проектов

25. BEM vs OOCSS
<div class="box profile">
<img class="avatar" />
<p class="bio">...</p>
</div>
<div class="profile--is-pro-user">
<img class="profile__image" />
<p class="profile_bio">...</p>
</div>

26. Some Good Practice

27. Good practice
Избегать стилизации id
#sidebar {font-size: 14px}
<div id=‘sidebar’></div>

28. Good practice
Избегать !important
.sidebar {font-size: 14px !important}
<div class=‘sidebar’></div>

29. Good practice
Избегать элементов в селекторах
div.sidebar {font-size: 14px !important}
<div class=‘sidebar’></div>

30. Good practice
Избегать большого количества псевдо-классов
box:not(:empty):last-child .title

31. Good practice
Классы которые используются в Javascript начинайте с
префикса js-
<div class=‘sidebar js-is-shown’></div>

32. Good practice
Классы которые модифицируют стили можно
использовать с приставкой mod-
<div class=‘sidebar mod-small-padding’></div>

33. Оптимизация CSS

34. Конвейер пикселей
Вычисление стилей
Расчет макета
Прорисовка
Компоновка

35. Чем проще селекторы тем лучше
.box:nth-last-child(-n+1) .title
.final-box-title
При модификации DOM. Сокращайте количество элементов для
которых нужно пересчитывать стили.
BEM помогает частично решить эту проблему

36. Вычисление стилей

37. Вычисление стилей
50% времени на вычисление стилей приходится на
сопоставление селекторов

38. По возможности избегайте перерасчета макета
.box {
width: 20px;
height: 20px;
}
Перерасчет макета почти всегда выполняется для всего элемента
.box--expanded {
width: 200px;
height: 350px;
}
Чем больше DOM дерево тем затратное перерасчет макета. Старайтесь
минимизировать вложенность элементов

39. Прорисовка самый затратный процесс рендеринга
Position: transform: translate(npx, npx);
Scale: transform: scale(n);
Rotation: transform: rotate(ndeg);
Skew: transform: skew(X|Y)(ndeg);
Matrix: transform: matrix(3d)(…);
Opacity: opacity: 0…1;
Для анимации можно использовать requestAnimationFrame()

40. Анимация с использование background-position
Анимация с использованием transform: translate

41. CSS Triggers
http://csstriggers.com

42. Workflow

43. Workflow
Установите стандарты кода
Следуйте установленным стандартам
Разбивайте CSS на файлы
Автоматизируйте процессы
???
PROFIT!!!!

44. Не изобретайте велосипед
Code guide примеры
Trello:
https://gist.github.com/bobbygrace/9e961e8982f42eb91b80
http://styleguides.io/

45. Инструменты

46. Препроцессоры
VS

47. Препроцессоры
.products{
&__product{
&__item{…}
}
}
$custom-font: 'Roboto Slab', serif;
$link-primary: #000;
$link-secondary: #737373;
$link-hover: #f5b431;

48. Инструменты
VS

49. Автоматизация
Минификация, конкатинация, сборка
Удаление не используемых классов
Создание спрайтов, сжатие изображений
Auto-prefixer
Проверка соответсвию стандартам CSS comb
+ сборщики BEM (Bem tools)

50. Автоматизация
grunt-uncss
gulp-uncss
csscomb
gulp-autoprefixer
grunt-autoprefixer
gulp.spritesmith
grunt-spritesmith

51. Полезное
https://aerotwist.com
Google Developers (Udacity course)
Gulp, Grunt, npm
http://csstriggers.com
BEM
http://styleguides.io/
https://gist.github.com/bobbygrace/9e961e8982f42eb91b80

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

53. Anton Tymchuk
facebook.com/creatonio
creatonio@gmail.com