Upload
studio-stfalconcom
View
200
Download
2
Embed Size (px)
Citation preview
Работа с 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