CSS-менеджмент в 2016

CSS-менеджмент в 2016
Тимофей Чаптыков
tim.chaptykov@gmail.com @chaptykov

skver.2gis.ru
пока для Москвы и Новосибирска
3

Можно всё Практичность
5

Экосистема диктует правила
8

С какой экосистемой мы имеем дело?
9

Стили
Неотъемлемая и неотделимая часть приложения.
• Стили должны подчиняться правилам экосистемы JavaScript
• JavaScript-приложение должно учитывать специфику работы со
стиялми
12

Прислушаться к экосистеме
•  Архитектура
•  Инструментирование
•  Микроменеджмент
13

Архитектура
• Выделение абстракций
• Установка интерфейсов взаимодействия между абстракциями
16

Архитектура → Абстракции
17

Методологии и фреймворки
•  BEM
•  OOCSS
•  SMACSS
•  BEMIT
•  Atomic CSS
18

BEM by Yandex
<div class="block block--mod">
<p class="block__elem">Lorem ipsum</p>
</div>
19

OOCSS by Yahoo
<div class="block w200">
Lorem ipsum
</div>
20

SMACSS by Johnathan Snook
<header class="l-header">
<div class="block">
<div class="block-elem is-modified"></div>
</div>
</header>
21

BEMIT by CSS Wizardy
<div class="o-obj@md c-block c-block--mod">
<p class="o-obj__elem@md c-block__elem">
Lorem ipsum
</p>
</div>
22

Atomic CSS by Yahoo
<div class="foo Bd C(#0280ae) Ta(c)">
<p class="Op(0) foo:h>Op(1)">Lorem ipsum</p>
</div>
23

Просто набор абстракций
24

Архитектура → Модульность
26

CSS как js-модуль
import './block.css';
import React from 'react';
export const Block = () => {
return <div className="foo" />;
};
29

Как это работает?
31

Конфигурация Webpack
{
module: {
loaders: [
{ test: /.css$/, loader: 'style!css' }
]
}
}
32

Результат
<style>
.foo { /* rules are here */ }
</style>
…
<div class="foo"></div>
33

CSS-модули
import s from './block.css';
import React from 'react';
export const Block = () => {
return <div className={s.foo} />;
};
34

Конфигурация Webpack
{
test: /.css$/,
loader: 'style!css-loader?modules&importLoaders=1&' +
'localIdentName=[name]__[local]___[hash:base64:5]'
}
35

Результат
<style>
.block__foo___bg5ax { /* rules are here */ }
</style>
…
<div class="block__foo___bg5ax"></div>
36

Архитектура → Конфигурирование
37

Названия ключей
:root {
--red: blue; /* ? */
}
a {
color: var(--red);
}
38

Уместное переиспользование
:root {
--linkHoverColor: blue;
}
header {
background: var(—linkHoverColor); /* ? */ 
}
39

А нужно ли вообще выносить в конфиг?
40

Инструментирование2
41

Инструментирование
Возможность отслеживания или установления количественных
параметров уровня производительности программного продукта,
а также возможность диагностировать ошибки и записывать
информацию для отслеживания причин их возникновения.
42

Возможность отслеживания или установления количественных
параметров уровня производительности программного продукта,
а также возможность диагностировать ошибки и записывать
информацию для отслеживания причин их возникновения.
43

• Низкий уровень — код, конструкции языка
• Высокий уровень — абстракции приложения
Условная терминология
44

Инструментирование → Низкий уровень
45

Диагностика ошибок
•  JSHint
•  JSLint
•  JSCS
•  ESLint
46

Диагностика ошибок
•  JSHint
•  JSLint
•  JSCS
•  ESLint
48

JS: ESLint CSS: Stylelint
49

Синтаксические ошибки в JS
var a = };
Parsing error: Unexpected token }
50

Синтаксические ошибки в CSS
div {}}
CssSyntaxError: Unexpected }
51

Проверка стиля кода в JS
function() {
var foo = 1;
var bar = 2;
}
Expected indentation of 4 spaces
52

Проверка стиля кода в CSS
div {
display: block;
color: red;
}
Expected indentation of 4 spaces
53

Другие вопросы
•  Сколько селекторов в ваших стилях?
•  Какая максимальная специфичность?
•  Сколько видов цветов используется в ваших стилях?
54

Инструментирование → Высокий уровень
55

Оптимизация CSS
•  CSSO
•  clean-css
•  cssnano
56

CSSO — минимизируем CSS
Доклад Романа Дворнова на WSD
57

Дополнительная информация
об использовании CSS
может сильно улучшить сжатие стилей
58

Инструментирование CSS
•  Встроенные стили или отдельный бандл?
•  Разделение на чанки?
•  Асинхронная загрузка стилей?
•  Кеширование в localStorage?
•  Critical CSS?
60

Здесь будут самые вкусные новинки 2016
61

Cпецифичное инструментирование
для вашего проекта
62

Микроменеджмент3
63

Снижение когнитивной нагрузки
64

Как быстро вы понимаете, что происходит?
65

Микроменеджмент → Порядок правил
66

Инструменты
•  CSSComb
•  postcss-sort
•  Stylelint для проверки
68

Микроменеджмент → Порядок селекторов
69

Порядок блоков в CSS
•  Константы сверху
•  Селекторы по порядку их использования в DOM
•  Анимации и медиавыражения вниз
70

:root {
--color: red;
}
.foo {
color: var(--color);
animation: fade 1s ease;
}
@keyframes fade {
from { opacity: 0; }
to { opacity: 0; }
}
71

Микроменеджмент → Оптимизация
72

Оптимизация для себя, а не для браузеров
73

Сокращенные правила
74

.foo {
line-height: 2;
font-size: 14px;
top: 50%;
margin-left: -20px;
width: 40px;
margin-top: -20px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
left: 50%;
height: 40px;
text-align: center;
position: absolute;
}
75

.foo {
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
width: 40px;
height: 40px;
font-size: 14px;
line-height: 2;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
text-align: center;
}
76

Используем сокращенную запись
.foo {
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -20px;
width: 40px;
height: 40px;
font: bold 14px/2 Helvetica, Arial, sans-serif;
text-align: center;
}
77

postcss-short
.foo {
position: absolute 50% * * 50%;
margin: -20px 0 0 -20px;
size: 40px;
font: bold 14px/2 Helvetica, Arial, sans-serif;
text-align: center;
}
78

До
.foo {
background-image: linear-gradient(
to bottom,
#000000 0%,
#000000 50%,
#ffffff 50%,
#ffffff 100%
);
}
80

После
.foo {
background: linear-gradient(#000 50%, #fff 50%);
}
81

Микроменеджмент → Свой язык
82

Свой язык в JavaScript
function Foo() {
// …
}
Функция-конструктор
83

Какую информацию несет стиль кода CSS?
84

.foo {
display: block;
}
/**
* - Переопределяем поведение строкового элемента?
* - Переопределяем вышестоящее правило?
* - Просто лишнее правило? На всякий случай?
*/
85

Соглашения
• Не пишем значения по умолчанию
• Использование каждого правила должно быть обосновано
86

.foo {
margin-top: 20px;
}
/**
* - Какие значения для остальных отступов?
* - Переопределяем браузерные свойства (h1, ul)?
*/
87

Соглашения
• По умолчанию полная запись правила
• Отдельная запись для переопределния или сохранения
определенных выше правил
88

Выводы
•  Прислушиваемся к экосистеме
•  Используем компонентный подход
•  Оставляем возможности для инструментирования
•  Пишем для завтрашнего себя
90

Тимофей Чаптыков
tim.chaptykov@gmail.com
@chaptykov
91

CSS-менеджмент в 2016

More Related Content

Similar to CSS-менеджмент в 2016 (20)

More from Timophy Chaptykov (6)

CSS-менеджмент в 2016