Андрей Ситник

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

])