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

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

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

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

Transcript

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

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

5. View Slide

6. Преимущества переменных
   Переменные — основа современного правильно сконструированного проекта.
   Карен Менезес, Variables: The Backbone Of CSS Architecture
   — Модульность.
   — Уменьшение повторяемости.
   — Сокращение объема.
   — Повышение читаемости.
   — Стайлгайд.
   “
   

   View Slide

7. Переменные. Когда и какие?
   Условие
   — Значение встречается в коде два и более раз.
   — Значение в будущем может изменяться.
   Тип
   — Измерения (размеры, отступы,
   радиусы скругления и т.п.).
   — Цветовые схемы.
   — Типографика.
   — Наборы иконок.
   — Брейкпойнты.
   

   View Slide

8. 18 лет!
   

   View Slide

9. Runtime
   DOM
   Cascading
   

   View Slide

10. Синтаксис
    Свойство
    --variable: value;
    Функция
    var(--variable);
    

    View Slide

11. @#$%&!
    Синтаксис
    Свойство
    --variable: ;
    Функция
    background: var(--variable);
    

    View Slide

12. 10px
    background
    Синтаксис
    Свойство
    --variable: ;
    Функция
    : var(--variable);
    

    View Slide

13. trasparent
    Синтаксис
    Свойство
    --variable: 10px;
    Функция
    background: ;
    

    View Slide

14. View Slide

15. PostCSS CSS Variables
    — Source + Fallback
    — @media
    — Object()
    

    View Slide

16. View Slide

17. Scope
    

    View Slide

18. Scope
    :root {
    --variable: value;
    }
    Аналогично
    document.documentElement
    html {
    --variable: value;
    }
    01.
    02.
    03.
    01.
    02.
    03.
    

    View Slide

19. Scope
    selector {
    --variable: value;
    }
    Псевдокласс:
    selector:pseudo-class {
    --variable: value;
    }
    Медиа-запрос:
    @media selector {
    --variable: value;
    }
    01.
    02.
    03.
    01.
    02.
    03.
    01.
    02.
    03.
    

    View Slide

20. Scope
    :host {
    --variable: value;
    }
    01.
    02.
    03.
    

    View Slide

21. $foo
    

    View Slide

22. Custom
    Property
    ≠
    Variable
    

    View Slide

23. $foo
    — Допустимая лексема CSS.
    — --variable: value .
    — Fallback.
    

    View Slide

24. $foo
    Если бы мы использовали символ "$" для переменных, то не смогли бы его
    использовать для будущих новых более мощных сущностей, подобных на
    переменные.
    Таб Аткинс, Let's Talk about CSS Variables
    Кроме того:
    — совместимость с препроцессорами;
    — нативные "грамматика и пунктуация" CSS.
    “
    

    View Slide

25. @media
    

    View Slide

26. @media
    

    View Slide

27. @media
    

    View Slide

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.
    

    View Slide

29. @media (SASS)
    $gutter: 1rem;
    .сontainer {
    margin: $gutter;
    }
    @media (min-width: 1200px) {
    $gutter: 2rem;
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    09.
    

    View Slide

30. @media (min-width: 1200px) {
    $gutter: 2rem;
    }
    @media (SASS)
    $gutter: 1rem;
    .сontainer {
    margin: $gutter;
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    09.
    

    View Slide

31. @media (SASS)
    — @mixin + $map: ();
    — %foo + #{}
    — TL;DR
    

    View Slide

32. View Slide

33. Inheritance
    

    View Slide

34. Inheritance
    

    View Slide

35. Inheritance
    

    View Slide

36. Inheritance
    :root {
    --color: black;
    }
    button {
    background: var(--color);
    }
    .black-box {
    --color: white;
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    09.
    

    View Slide

37. Каскад?
    Это шутка?
    

    View Slide

38. SOLID O
    Программные сущности (классы, модули, функции и т.д.) должны быть
    открыты для расширения, но закрыты для изменения.
    Бертран Мейер
    “
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

44. View Slide

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.
    

    View Slide

46. Fallback
    

    View Slide

47. black
    Fallback
    :root {
    --color:;
    }
    .button {
    background: var(--color, );
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    

    View Slide

48. --color-default: black;
    var(--color-default)
    Fallback
    :root {
    --color:;
    }
    .button {
    background: var(--color, );
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    

    View Slide

49. :;
    Fallback
    :root {
    --color
    --color-default: black;
    }
    .button {
    background: var(--color, var(--color-default));
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    

    View Slide

50. Fallback
    :root {
    --color: ;
    --color-default: black;
    }
    .button {
    background: var(--color, var(--color-default));
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    

    View Slide

51. initial
    Fallback
    :root {
    --color: ;
    --color-default: black;
    }
    .button {
    background: var(--color, var(--color-default));
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    

    View Slide

52. var(--color-custom, black)
    Fallback
    :root {
    --color: ;
    --color-custom: initial;
    }
    .button {
    background: var(--color);
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    

    View Slide

53. I18n
    

    View Slide

54. “en”
    «ru»
    

    View Slide

55. I18n
    
    …
    
    Чебурашка
    
    
    01.
    02.
    03.
    04.
    05.
    06.
    

    View Slide

56. lang="ru"
    I18n
    
    …
    
    Чебурашка
    
    
    01.
    02.
    03.
    04.
    05.
    06.
    

    View Slide

57. «
    »
    I18n
    :root:lang(en) {
    --quotes-l: "“"; --quotes-r: "”";
    }
    q {
    quotes: var(--quotes-l, " ")
    var(--quotes-r, " ");
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    

    View Slide

58. “ ”
    I18n
    :root:lang(en) {
    --quotes-l: " "; --quotes-r: " ";
    }
    q {
    quotes: var(--quotes-l, "«")
    var(--quotes-r, "»");
    }
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    

    View Slide

59. calc()
    

    View Slide

60. View Slide

61. View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

65. 
    

    View Slide

66. --color: black;
    var(--color)
    
    
    <br/>:root {<br/>}<br/>
    
    
    01.
    02.
    03.
    04.
    05.
    06.
    07.
    08.
    

    View Slide

67. --color: black;
    var(--color)
    
    CSS
    :root {
    }
    SVG
    
    
    
    01.
    02.
    03.
    01.
    02.
    03.
    

    View Slide

68. JavaScript
    

    View Slide

69. getPropertyValue
    setProperty
    removeProperty
    API CSSStyleDeclaration
    Получаем
    getComputedStyle(document.documentElement)
    . ('--variable');
    Назначаем
    element.style. ('--variable', 'value');
    Удаляем
    element.style. ('--variable');
    01.
    02.
    

    View Slide

70. @supports
    

    View Slide

71. @supports (--a: 0) {
    }
    @supports
    /* Progressive Enhancement */
    01.
    02.
    03.
    

    View Slide

72. @supports not (--a: 0) {
    }
    @supports
    /* Graceful Degradation */
    01.
    02.
    03.
    

    View Slide

73. CSS.supports
    

    View Slide

74. CSS.supports
    if (window.CSS && window.CSS.supports &&
    window.CSS.supports('--a', 0)) {
    // сценарии с поддержкой переменных
    } else {
    // сценарии без поддержки переменных
    }
    01.
    02.
    03.
    04.
    05.
    06.
    

    View Slide

75. Рекомендации
    — :root
    — var(--property, fallback)
    — @supports
    — --property-calc
    — initial
    

    View Slide

76. И еще…
    

    View Slide

77. Thx Tab!
    

    View Slide

78. Спасибо за
    внимание!
    Вопросы?
    

    View Slide