За последние 7 лет появились десятки подходов к тому, как организовывать работу со стилями на веб-проектах: от БЭМ до CSS Modules. Огромное распространение получила экосистема PostCSS. Многие из нас перешли на React. Пришло время разобраться, что из инструментов взять с собой в будущее, а что забыть, как страшный сон.

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

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

4. Проблема1
4

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

7. Эконом Корч
7

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

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

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

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

14. Архитектура1
14

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

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

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

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

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

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

22. 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

23. 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. Просто набор абстракций
24

25. Бритва Оккама

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

28. Webpack
28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

49. JS: ESLint CSS: Stylelint
49

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

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

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

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

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

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

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

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

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

59. CSS Modules
59

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

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

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

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

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

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

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

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

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

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

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

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

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

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

75. .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

76. .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

77. Используем сокращенную запись
.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

78. 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. Пишем коротко
79

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

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

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

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

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

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

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

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

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

89. Итог5
89

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

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