Save 37% off PRO during our Black Friday Sale! »

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

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

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

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

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

0f07f4b242d088a7eed61c2a8e5d86e1?s=128

Pavel Lautsevich

September 17, 2016
Tweet

Transcript

  1. Пользовательские свойства как основа архитектуры CSS Павел Ловцевич, LOVATA

  2. Павел Ловцевич CTO @ LOVATA @zigzag_mcquack p.lovtsevich@lovata.com

  3. None
  4. Препроцессоры

  5. None
  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: ;

  14. None
  15. PostCSS CSS Variables — Source + Fallback — @media —

    Object()
  16. None
  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
  32. None
  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.
  44. None
  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()

  60. None
  61. None
  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. Спасибо за внимание! Вопросы?