Пользовательские свойства как основа архитектуры CSS (FrontTalks)

Распространившаяся имплементация пользовательских свойств CSS в большинство популярных браузеров открыла такой простор для творчества и экспериментов над архитектурой CSS-кода, какого раньше не было.

Всесильны ли препроцессоры?
Можно ли дать CSS второй шанс?
Наследуемость или БЭМ?
А что с обратной совместимостью? Решение есть!

В докладе будет рассмотрены наиболее важные аспекты спецификации CSS Custom Properties for Cascading Variables Module Level 1. На практических примерах будут детально разобраны нюансы использования пользовательских свойств, также будет затронут вопрос обратной совместимости с браузерами, не имеющими поддержку данной технологии.

Transcript

1. Пользовательские свойства как основа архитектуры CSS Павел Ловцевич, LOVATA
2. Павел Ловцевич CTO @ LOVATA @zigzag_mcquack p.lovtsevich@lovata.com
4. Препроцессоры
6. Преимущества переменных Переменные — основа современного правильно сконструированного проекта. Карен Менезес, Variables: The Backbone Of CSS Architecture — Модульность. — Уменьшение повторяемости. — Сокращение объема. — Повышение читаемости. — Стайлгайд. “
7. Переменные. Когда и какие? Условие — Значение встречается в коде два и более раз. — Значение в будущем может изменяться. Тип — Измерения (размеры, отступы, радиусы скругления и т.п.). — Цветовые схемы. — Типографика. — Наборы иконок. — Брейкпойнты.
8. 18 лет!
9. Runtime DOM Cascading
10. Синтаксис Свойство --variable: value; Функция var(--variable);
11. @#$%&! Синтаксис Свойство --variable: ; Функция background: var(--variable);
12. 10px background Синтаксис Свойство --variable: ; Функция : var(--variable);
13. trasparent Синтаксис Свойство --variable: 10px; Функция background: ;
15. PostCSS CSS Variables — Source + Fallback — @media — Object()
17. Scope
18. Scope :root { --variable: value; } Аналогично document.documentElement html { --variable: value; } 01. 02. 03. 01. 02. 03.
19. Scope selector { --variable: value; } Псевдокласс: selector:pseudo-class { --variable: value; } Медиа-запрос: @media selector { --variable: value; } 01. 02. 03. 01. 02. 03. 01. 02. 03.
20. Scope :host { --variable: value; } 01. 02. 03.
21. $foo
22. Custom Property ≠ Variable
23. $foo — Допустимая лексема CSS. — --variable: value . — Fallback.
24. $foo Если бы мы использовали символ "$" для переменных, то не смогли бы его использовать для будущих новых более мощных сущностей, подобных на переменные. Таб Аткинс, Let's Talk about CSS Variables Кроме того: — совместимость с препроцессорами; — нативные "грамматика и пунктуация" CSS. “
25. @media
26. @media
27. @media
28. 1rem 2rem @media :root { --gutter: ; } .сontainer { margin: var(--gutter); } @media (min-width: 1200px) { :root { --gutter: ; } } 01. 02. 03. 04. 05. 06. 07. 08. 09.
29. @media (SASS) $gutter: 1rem; .сontainer { margin: $gutter; } @media (min-width: 1200px) { $gutter: 2rem; } 01. 02. 03. 04. 05. 06. 07. 08. 09.
30. @media (min-width: 1200px) { $gutter: 2rem; } @media (SASS) $gutter: 1rem; .сontainer { margin: $gutter; } 01. 02. 03. 04. 05. 06. 07. 08. 09.
31. @media (SASS) — @mixin + $map: (); — %foo + #{} — TL;DR
33. Inheritance
34. Inheritance
35. Inheritance
36. Inheritance :root { --color: black; } button { background: var(--color); } .black-box { --color: white; } 01. 02. 03. 04. 05. 06. 07. 08. 09.
37. Каскад? Это шутка?
38. SOLID O Программные сущности (классы, модули, функции и т.д.) должны быть открыты для расширения, но закрыты для изменения. Бертран Мейер “
39. SOLID O Плохо .button { background: black; } .black-box .button { background: white; } Хорошо .button { background: var(--color, black); } .black-box { --color: white; } 01. 02. 03. 04. 05. 06. 07. 01. 02. 03. 04. 05. 06. 07.
40. .black-box .button background: white; } SOLID O Плохо .button { background: black; } { Хорошо .button { background: var(--color, black); } .black-box { --color: white; } 01. 02. 03. 04. 05. 06. 07. 01. 02. 03. 04. 05. 06. 07.
41. .button SOLID O Плохо .button { background: black; } .black-box .button { background: white; } Хорошо { background: var(--color, black); } .black-box { --color: white; } 01. 02. 03. 04. 05. 06. 07. 01. 02. 03. 04. 05. 06. 07.
42. --color SOLID O Плохо .button { background: black; } .black-box .button { background: white; } Хорошо .button { background: var( , black); } .black-box { --color: white; } 01. 02. 03. 04. 05. 06. 07. 01. 02. 03. 04. 05. 06. 07.
43. --color: white SOLID O Плохо .button { background: black; } .black-box .button { background: white; } Хорошо .button { background: var(--color, black); } .black-box { ; } 01. 02. 03. 04. 05. 06. 07. 01. 02. 03. 04. 05. 06. 07.
45. background: var(--color, black); SOLID O Плохо .button { background: black; } .black-box .button { background: white; } Хорошо .button { } .black-box { --color: white; } 01. 02. 03. 04. 05. 06. 07. 01. 02. 03. 04. 05. 06. 07.
46. Fallback
47. black Fallback :root { --color:; } .button { background: var(--color, ); } 01. 02. 03. 04. 05. 06. 07.
48. --color-default: black; var(--color-default) Fallback :root { --color:; } .button { background: var(--color, ); } 01. 02. 03. 04. 05. 06. 07. 08.
49. :; Fallback :root { --color --color-default: black; } .button { background: var(--color, var(--color-default)); } 01. 02. 03. 04. 05. 06. 07. 08.
50. Fallback :root { --color: ; --color-default: black; } .button { background: var(--color, var(--color-default)); } 01. 02. 03. 04. 05. 06. 07. 08.
51. initial Fallback :root { --color: ; --color-default: black; } .button { background: var(--color, var(--color-default)); } 01. 02. 03. 04. 05. 06. 07. 08.
52. var(--color-custom, black) Fallback :root { --color: ; --color-custom: initial; } .button { background: var(--color); } 01. 02. 03. 04. 05. 06. 07. 08.
53. I18n
54. “en” «ru»
55. I18n <html lang="ru"> … <body> <q>Чебурашка</q> </body> </html> 01. 02. 03. 04. 05. 06.
56. lang="ru" I18n <html > … <body> <q>Чебурашка</q> </body> </html> 01. 02. 03. 04. 05. 06.
57. « » I18n :root:lang(en) { --quotes-l: "“"; --quotes-r: "”"; } q { quotes: var(--quotes-l, " ") var(--quotes-r, " "); } 01. 02. 03. 04. 05. 06. 07.
58. “ ” I18n :root:lang(en) { --quotes-l: " "; --quotes-r: " "; } q { quotes: var(--quotes-l, "«") var(--quotes-r, "»"); } 01. 02. 03. 04. 05. 06. 07.
59. calc()
62. --line-height: 1.5; calc() :root { --paragraph-margin: calc(var(--line-height) * 2); } p { margin-bottom: calc(var(--paragraph-margin, 0) * 1px); } 01. 02. 03. 04. 05. 06. 07. 08.
63. --paragraph-margin: calc(var(--line-height) * 2); calc() :root { --line-height: 1.5; } p { margin-bottom: calc(var(--paragraph-margin, 0) * 1px); } 01. 02. 03. 04. 05. 06. 07. 08.
64. calc(var(--paragraph-margin, 0) * 1px); calc() :root { --line-height: 1.5; --paragraph-margin: calc(var(--line-height) * 2); } p { margin-bottom: } 01. 02. 03. 04. 05. 06. 07. 08.
65. <SVG>
66. --color: black; var(--color) <SVG> <svg height="100" width="100"> <style> :root { } </style> <circle cx="50" cy="50" r="50" fill=" " /> </svg> 01. 02. 03. 04. 05. 06. 07. 08.
67. --color: black; var(--color) <SVG> CSS :root { } SVG <svg height="100" width="100"> <circle cx="50" cy="50" r="50" fill=" " /> </svg> 01. 02. 03. 01. 02. 03.
68. JavaScript
69. getPropertyValue setProperty removeProperty API CSSStyleDeclaration Получаем getComputedStyle(document.documentElement) . ('--variable'); Назначаем element.style. ('--variable', 'value'); Удаляем element.style. ('--variable'); 01. 02.
70. @supports
71. @supports (--a: 0) { } @supports /* Progressive Enhancement */ 01. 02. 03.
72. @supports not (--a: 0) { } @supports /* Graceful Degradation */ 01. 02. 03.
73. CSS.supports
74. CSS.supports if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) { // сценарии с поддержкой переменных } else { // сценарии без поддержки переменных } 01. 02. 03. 04. 05. 06.
75. Рекомендации — :root — var(--property, fallback) — @supports — --property-calc — initial
76. И еще…
77. Thx Tab!
78. Спасибо за внимание! Вопросы?