css-менеджмент в 2016
TRANSCRIPT
Проблема1
4
Можно всё Практичность
5
Эконом Корч
7
Экосистема диктует правила
8
С какой экосистемой мы имеем дело?
9
Стили
Неотъемлемая и неотделимая часть приложения.
• Стили должны подчиняться правилам экосистемы JavaScript
• JavaScript-приложение должно учитывать специфику работы со
стиялми
12
Прислушаться к экосистеме
• Архитектура
• Инструментирование
• Микроменеджмент
13
Архитектура1
14
Архитектура
• Выделение абстракций
• Установка интерфейсов взаимодействия между абстракциями
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 Modules
59
Инструментирование 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
Пишем коротко
79
До.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
Итог5
89
Выводы
• Прислушиваемся к экосистеме
• Используем компонентный подход
• Оставляем возможности для инструментирования
• Пишем для завтрашнего себя
90
