1
Изоляция CSSАндрей Ситник, Злые Марсиане
2
Злые марсианеЗлые марсианеЗлые марсиане
Злые марсиане
3
Работали над
4
Наш опенсорс
5
Глава 1Глава 1Глава 1
Глава 1
Проблема Проблема Проблема
Проблема
6
Зачем нам ИТ?Зачем нам ИТ?Зачем нам ИТ?
Зачем нам ИТ?
7
Рост сложности
3 объекта 6 объектов
3 связи 15 связей
8
Решение роста
9
Программирование —Программирование —контроль сложностиконтроль сложности
10
Компоненты сети
11
Компоненты ОС
systemctl
systemd Core
manager service
socket
mount
systemd snapshot path
targettimer
swap
unitmultiseat inhibit
pamsession
loginnamespace
cgroup
log
dbus
systemd Libraries
Linux Kernel
systemd Targets
systemd Utilitiesnotify analyze cgls cgtop loginctljournalctl nspawn
dbus-1 libpam libcap libcryptsetup tcpwrapper libaudit libnotify
basic
reboot
bootmode
shutdown
dbus telephony
logind
multi-user
dloguser-
sesssion
graphicaldisplay serviceuser-session
tizen service
systemd Daemons
logind
journald
systemd
session
cgroups autofs kdbus
networkd
12
Компоненты JavaScript
import React from 'react';
import Logo from '../logo';
export const Header = () => (
<div class="header">
<Logo></Logo>
</div>
);
13
Компоненты дизайна
14
Глобальный CSS :-(
* {
box-sizing: border-box;
}
.title {
font-size: 30px;
}
15
Глава 2Глава 2Глава 2
Глава 2
Четыре всадника CSS Четыре всадника CSS Четыре всадника CSS
Четыре всадника CSS
16
Всадник 1 Конфликт селекторов
/* logo.css */
.name {
color: gray;
}
/* header.css */
.name {
color: red;
}
17
БЭМ
window.prefixA = …;
window.prefixB = …;
18
Всадник 2 Глобальный сброс
* {
box-sizing: border-box;
}
19
Всадник 3 Наследуемые свойства
body
.header
.logo
line-height: 1.4
line-height: 1.4
line-height: 1.4
20
Агрессивные селекторы
.article p {
margin-bottom: 1em;
}
21
Всадник 4 Медиа-выражения страницы
.logo:container( width <= 100px ) {
.name {
display: none;
}
}
22
Четыре встадника
Конфликт селекторов
Глобальный сброс
Наследуемые свойства
Медиа-выражения страницы
23
Ждать Веб-компонентов?Ждать Веб-компонентов?
24Глава 3Глава 3Глава 3
Глава 3
Революция Революция Революция
Революция
25
PostCSS
26
Задачи
Sass
PostCSS
27
Код
return gulp.src('src/*.scss')
.pipe( sass() )
.pipe( postcss(plugins) )
.pipe( gulp.desc('build/') );
28
Глава 4 Побеждаем глобальный CSS
29
Шаг 1 Чистая комната
gulp.task('css:new', () => {
return gulp.src('src/new/')
.pipe( postcss([
require('autoprefixer')
// other plugins
]) )
.pipe( gulp.dist('build/') )
});
30
Шаг 2 Нарежьте дизайн на блоки
31
Шаг 3 Папка для компонента
logo/
logo.js
logo.css
company.svg
header/
header.js
header.css
js/
logo.js
header.js
css/
logo.css
header.css
images/
company.svg
32
Шаг 4 postcss-modules
postcss([
require('autoprefixer'),
require('postcss-modules')
])
33
Пишите любые селекторы
.name {
color: red;
}
.Logo_name_jbds3 {
color: red;
}
34
Шаблон
var style = require('./logo.css.json');
export const Logo = () => (
<div className={ style.name }>
</div>
);
35
Работает с PHP и Rails
- style = load_json('logo.css.json');
%div{ class: style.name }
36
CSS Modules против БЭМ
1. Стили чище
2. Переносимость между проектами
3. Безопаснее для виджетов
37
Первая победа
Конфликт селекторов
Глобальный сброс
Наследуемые свойства
Медиа-выражения страницы
38
Локальный сброс
h1, h2, …, div {
/* сброс */
}
.header {
/* стили */
}
.logo {
/* стили */
}
.header, .logo {
/* сброс */
}
.header {
/* стили */
}
.logo {
/* стили */
}
39
Локальный сброс
body
.header
.logo
line-height: 1.4
line-height: 1
line-height: 1
40
Плюсы локального сброса
1. У каждого — свой ресет
2. Переносимость между проектами
3. Защищает от наследуемых свойств
41
Сброс по W3C
.logo {
all: initial;
}
42
Шаг 5 postcss-autoreset
postcss([
…,
require('postcss-autoreset')({
reset: {
all: 'initial',
boxSizing: 'border-box'
}
})
])
43
Шаг 6 postcss-cssnext
postcss([
require('autoprefixer'),
require('postcss-modules'),
require('postcss-autoreset'),
require('postcss-cssnext')
])
44
Полифил будущего CSS
.logo {
all: initial;
}
.logo {
display: block;
border: none;
padding: 0;
margin: 0;
…
}
45
Ещё две победы
Конфликт селекторов
Глобальный сброс
Наследуемые свойства
Медиа-выражения страницы
46
Шаг 7 cq-prolyfill
<script src="cq-prolyfill.min.js" async>
</script>
postcss([
…,
require('cq-prolyfill/postcss-plugin')
])
47
Медиа-выражения контейнера
.logo:container( width >= 100px ) {
…
}
.logo:container( text-align = right ) {
…
}
.logo:container( background-color lightness > 20% ) {
…
}
48
Полная изоляция
Конфликт селекторов
Глобальный сброс
Наследуемые свойства
Медиа-выражения страницы
49
Глава 5Глава 5Глава 5
Глава 5
Плюсы Плюсы Плюсы
Плюсы
50
Без вопросов
1. Виджеты на сторонние сайты
2. Компоненты в npm
3. Плагины для браузера
4. Большие команды с кучей проектов
51
Без вопросов
1. Виджеты на сторонние сайты
2. Компоненты в npm
3. Плагины для браузера
4. Большие команды с кучей проектов
52
Проще тестировать
53
Проще обновлять технологии
old/
logo/
new/
header/
54
Глава 6Глава 6Глава 6
Глава 6
Советы Советы Советы
Советы
55
Главное зло
.logo {
&.is-in-header {
width: 100px;
height: 100px;
padding: 10px 0;
}
&.is-in-footer {
…
}
}
56
Совет 1 Пишите размеры в обёртках
<div className={ style.place }>
<Logo>
</div>
.place {
width: 100px;
height: 100px;
padding: 10px 0;
position: relative;
}
.logo {
width: 100%;
height: 100%;
}
57
Совет 2 Вкладывайте друг в друга
<Button icon="remove" /> <Button>
<RemoveIcon>
</Button>
58
Финал
59
Полная изоляция
postcss([
require('autoprefixer'),
// Изоляция селекторов
require('postcss-modules'),
// Локальный сброс
require('postcss-autoreset'),
require('postcss-cssnext'),
// Контейнерные выражения
require('cq-prolyfill/postcss-plugin')
])