Робота з css. Методології, інструменти, оптимізація
TRANSCRIPT
![Page 1: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/1.jpg)
Работа с CSSМетодологии и инструменты
![Page 2: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/2.jpg)
Работа с CSS
Проблемы CSS
Подходы к организации CSS
Оптимизация CSS
Инструменты и автоматизация
![Page 3: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/3.jpg)
Проблемы CSS
![Page 4: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/4.jpg)
Проблемы CSS Повторения кода
h2 {font-size: 1em}
article h2 {font-size: 1.2em}
.cart section h2 {font-size: 2em}
![Page 5: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/5.jpg)
Проблемы CSS Повторения кода
Возможны сайд-эффекты
h2 {font-size: 1em; color: #000}
article h2 {font-size: 1.2em}
.cart section h2 {font-size: 2em}
![Page 6: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/6.jpg)
Проблемы CSS Повторения кода
Возможны сайд-эффекты
Сложности с поддержкой на больших проектах
![Page 7: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/7.jpg)
Поддержка и развитие
![Page 8: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/8.jpg)
Проблемы CSS Повторения кода
Возможны сайд-эффекты.
Сложности с поддержкой на больших проектах
Тестирование
![Page 9: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/9.jpg)
Подходы к написанию CSS
![Page 10: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/10.jpg)
ul {……}ul li {……}
ul li a {……}
Что изменилось за последние годы?
![Page 11: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/11.jpg)
ul {……}ul li {……}
ul li a {……}
акцент был на свойства
Что изменилось?
![Page 12: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/12.jpg)
ul {……}ul li {……}
ul li a {……}
больше внимания уделено “архитектуре”
Что изменилось?
![Page 13: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/13.jpg)
PLAIN CSS
![Page 14: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/14.jpg)
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>
![Page 15: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/15.jpg)
Plain CSS Нет системы именования селекторов
Много повторов кода
Сложности в поддержке и развитии
Огромные файлы CSS
Невозможно повторно использовать код
Много наследования классов
![Page 16: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/16.jpg)
OOCSSobject-oriented css
![Page 17: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/17.jpg)
OOCSS Разделение структуры и оформления
Разделение контейнера и контента
Модульность. Web-components - далеко.
Уменьшение вложенности селекторов
Возможно реиспользовать код
![Page 18: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/18.jpg)
OOCSS компоненты Сетки
Списки и заголовки
Кнопки
Rows (колонки)
Heading 1
Heading 2
Heading 3
Heading 4
![Page 19: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/19.jpg)
OOCSS
.sidebar {font-size: 14px}
.to-right {font-size: 14px; float: right}
<div class=‘sidebar’></div>
<div class=‘sidebar to-right’></div>
![Page 20: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/20.jpg)
OOCSS
.padding-10 {padding: 10px}
.padding-30 {padding: 30px}
<div class=‘sidebar padding-30’></div>
<div class=‘sidebar padding-10’></div>
![Page 21: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/21.jpg)
Группировка классов
<div class=‘[btn btn-primary] [small-text text-center]’></div>
![Page 22: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/22.jpg)
BEMblock-element-modifier
![Page 23: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/23.jpg)
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{…} - модификатор
![Page 24: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/24.jpg)
BEM плюсы Отсутствие каскадирование Web-componetns - ну почти.
Пространство имен и правила именования Возможность реиспользовать код
Легче поддерживать и масштабировать
Снижение сложности кода + наглядность
+ Сборщики проектов
![Page 25: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/25.jpg)
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>
![Page 26: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/26.jpg)
Some Good Practice
![Page 27: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/27.jpg)
Good practice Избегать стилизации id
#sidebar {font-size: 14px}
<div id=‘sidebar’></div>
![Page 28: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/28.jpg)
Good practice Избегать !important
.sidebar {font-size: 14px !important}
<div class=‘sidebar’></div>
![Page 29: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/29.jpg)
Good practice Избегать элементов в селекторах
div.sidebar {font-size: 14px !important}
<div class=‘sidebar’></div>
![Page 30: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/30.jpg)
Good practice Избегать большого количества псевдо-классов
box:not(:empty):last-child .title
![Page 31: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/31.jpg)
Good practiceКлассы которые используются в Javascript начинайте с префикса js-
<div class=‘sidebar js-is-shown’></div>
![Page 32: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/32.jpg)
Good practiceКлассы которые модифицируют стили можно использовать с приставкой mod-
<div class=‘sidebar mod-small-padding’></div>
![Page 33: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/33.jpg)
Оптимизация CSS
![Page 34: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/34.jpg)
Конвейер пикселей
Вычисление стилей
Расчет макета
Прорисовка
Компоновка
![Page 35: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/35.jpg)
Чем проще селекторы тем лучше
.box:nth-last-child(-n+1) .title
.final-box-title
При модификации DOM. Сокращайте количество элементов для которых нужно пересчитывать стили.
BEM помогает частично решить эту проблему
![Page 36: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/36.jpg)
Вычисление стилей
![Page 37: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/37.jpg)
Вычисление стилей
50% времени на вычисление стилей приходится на сопоставление селекторов
![Page 38: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/38.jpg)
По возможности избегайте перерасчета макета
.box { width: 20px; height: 20px;}
Перерасчет макета почти всегда выполняется для всего элемента
.box--expanded { width: 200px; height: 350px;}
Чем больше DOM дерево тем затратное перерасчет макета. Старайтесь минимизировать вложенность элементов
![Page 39: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/39.jpg)
Прорисовка самый затратный процесс рендеринга
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()
![Page 40: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/40.jpg)
Анимация с использование background-position
Анимация с использованием transform: translate
![Page 41: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/41.jpg)
CSS Triggers
http://csstriggers.com
![Page 42: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/42.jpg)
Workflow
![Page 43: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/43.jpg)
WorkflowУстановите стандарты кода
Следуйте установленным стандартам
Разбивайте CSS на файлы
Автоматизируйте процессы
???
PROFIT!!!!
![Page 44: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/44.jpg)
Не изобретайте велосипедCode guide примеры
Trello: https://gist.github.com/bobbygrace/9e961e8982f42eb91b80
http://styleguides.io/
![Page 45: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/45.jpg)
Инструменты
![Page 46: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/46.jpg)
Препроцессоры
VS
![Page 47: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/47.jpg)
Препроцессоры.products{
&__product{&__item{…}
}}
$custom-font: 'Roboto Slab', serif;$link-primary: #000;$link-secondary: #737373;$link-hover: #f5b431;
![Page 48: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/48.jpg)
Инструменты
VS
![Page 49: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/49.jpg)
АвтоматизацияМинификация, конкатинация, сборка
Удаление не используемых классов
Создание спрайтов, сжатие изображений
Auto-prefixer
Проверка соответсвию стандартам CSS comb
+ сборщики BEM (Bem tools)
![Page 50: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/50.jpg)
Автоматизацияgrunt-uncss
gulp-uncss
csscomb
gulp-autoprefixer
grunt-autoprefixer
gulp.spritesmith
grunt-spritesmith
![Page 51: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/51.jpg)
Полезноеhttps://aerotwist.com
Google Developers (Udacity course)
Gulp, Grunt, npm
http://csstriggers.com
BEM
http://styleguides.io/
https://gist.github.com/bobbygrace/9e961e8982f42eb91b80
![Page 52: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/52.jpg)
Спасибо за внимание
![Page 53: Робота з CSS. Методології, інструменти, оптимізація](https://reader035.vdocuments.pub/reader035/viewer/2022062400/58855e231a28ab47268b6c87/html5/thumbnails/53.jpg)
Anton Tymchuk
facebook.com/creatonio