Робота з CSS. Методології, інструменти, оптимізація

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

Работа с CSS

Проблемы CSS

Подходы к организации CSS

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

Инструменты и автоматизация

Проблемы CSS

Проблемы CSS Повторения кода

h2 {font-size: 1em}

article h2 {font-size: 1.2em}

.cart section h2 {font-size: 2em}

Проблемы CSS Повторения кода

Возможны сайд-эффекты

h2 {font-size: 1em; color: #000}

article h2 {font-size: 1.2em}

.cart section h2 {font-size: 2em}

Проблемы CSS Повторения кода

Возможны сайд-эффекты

Сложности с поддержкой на больших проектах

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

Проблемы CSS Повторения кода

Возможны сайд-эффекты.

Сложности с поддержкой на больших проектах

Тестирование

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

ul {……}ul li {……}

ul li a {……}

Что изменилось за последние годы?

ul {……}ul li {……}

ul li a {……}

акцент был на свойства

Что изменилось?

ul {……}ul li {……}

ul li a {……}

больше внимания уделено “архитектуре”

Что изменилось?

PLAIN CSS

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>

Plain CSS Нет системы именования селекторов

Много повторов кода

Сложности в поддержке и развитии

Огромные файлы CSS

Невозможно повторно использовать код

Много наследования классов

OOCSSobject-oriented css

OOCSS Разделение структуры и оформления

Разделение контейнера и контента

Модульность. Web-components - далеко.

Уменьшение вложенности селекторов

Возможно реиспользовать код

OOCSS компоненты Сетки

Списки и заголовки

Кнопки

Rows (колонки)

Heading 1

Heading 2

Heading 3

Heading 4

OOCSS

.sidebar {font-size: 14px}

.to-right {font-size: 14px; float: right}

<div class=‘sidebar’></div>

<div class=‘sidebar to-right’></div>

OOCSS

.padding-10 {padding: 10px}

.padding-30 {padding: 30px}

<div class=‘sidebar padding-30’></div>

<div class=‘sidebar padding-10’></div>

Группировка классов

<div class=‘[btn btn-primary] [small-text text-center]’></div>

BEMblock-element-modifier

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{…} - модификатор

BEM плюсы Отсутствие каскадирование Web-componetns - ну почти.

Пространство имен и правила именования Возможность реиспользовать код

Легче поддерживать и масштабировать

Снижение сложности кода + наглядность

+ Сборщики проектов

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>

Some Good Practice

Good practice Избегать стилизации id

#sidebar {font-size: 14px}

<div id=‘sidebar’></div>

Good practice Избегать !important

.sidebar {font-size: 14px !important}

<div class=‘sidebar’></div>

Good practice Избегать элементов в селекторах

div.sidebar {font-size: 14px !important}

<div class=‘sidebar’></div>

Good practice Избегать большого количества псевдо-классов

box:not(:empty):last-child .title

Good practiceКлассы которые используются в Javascript начинайте с префикса js-

<div class=‘sidebar js-is-shown’></div>

Good practiceКлассы которые модифицируют стили можно использовать с приставкой mod-

<div class=‘sidebar mod-small-padding’></div>

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

Конвейер пикселей

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

Расчет макета

Прорисовка

Компоновка

Чем проще селекторы тем лучше

.box:nth-last-child(-n+1) .title

.final-box-title

При модификации DOM. Сокращайте количество элементов для которых нужно пересчитывать стили.

BEM помогает частично решить эту проблему

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

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

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

По возможности избегайте перерасчета макета

.box { width: 20px; height: 20px;}

Перерасчет макета почти всегда выполняется для всего элемента

.box--expanded { width: 200px; height: 350px;}

Чем больше DOM дерево тем затратное перерасчет макета. Старайтесь минимизировать вложенность элементов

Прорисовка самый затратный процесс рендеринга

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

Анимация с использование background-position

Анимация с использованием transform: translate

CSS Triggers

http://csstriggers.com

Workflow

WorkflowУстановите стандарты кода

Следуйте установленным стандартам

Разбивайте CSS на файлы

Автоматизируйте процессы

???

PROFIT!!!!

Не изобретайте велосипедCode guide примеры

Trello: https://gist.github.com/bobbygrace/9e961e8982f42eb91b80

http://styleguides.io/

Инструменты

Препроцессоры

VS

Препроцессоры.products{

&__product{&__item{…}

}}

$custom-font: 'Roboto Slab', serif;$link-primary: #000;$link-secondary: #737373;$link-hover: #f5b431;

Инструменты

VS

АвтоматизацияМинификация, конкатинация, сборка

Удаление не используемых классов

Создание спрайтов, сжатие изображений

Auto-prefixer

Проверка соответсвию стандартам CSS comb

+ сборщики BEM (Bem tools)

Автоматизацияgrunt-uncss

gulp-uncss

csscomb

gulp-autoprefixer

grunt-autoprefixer

gulp.spritesmith

grunt-spritesmith

Полезноеhttps://aerotwist.com

Google Developers (Udacity course)

Gulp, Grunt, npm

http://csstriggers.com

BEM

http://styleguides.io/

https://gist.github.com/bobbygrace/9e961e8982f42eb91b80

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

Anton Tymchuk

facebook.com/creatonio

creatonio@gmail.com