Карточный домик стилизации без чистого CSS. Часть 1

Всем прекрасного времени суток. Это первая часть из серии двух статей про перенос стилизации с SCSS'а на чистый CSS.

Сегодня мы с вами посмотрим каким образом можно преобразовать миксины SCSS'а на CSS с атомарными классами. Как я уже писал в прошлой статье, я работаю в достаточно молодой компании уровня стартапа, поэтому мы сами открываем методы оптимизации и некоторые особенности CSS'а.

Итак начнём.

С чего всё началось

Нам было необходимо создать функционал в SCSS, который позволит сделать по-настоящему «резиновый» шрифт – при изменении размера экрана динамически меняется размер текста: font-size, line-height. Мой коллега нашёл неплохой способ реализовать это на SCSS через миксин.

@mixin adaptiv-font-engine($maxSize, $minSize, $lineHeightDelta, $maxWidth, $minWidth) { $fontCoef: $maxSize - $minSize; $widthCoef: $maxWidth - $minWidth; $size: calc(#{$minSize}px + #{$fontCoef} * ((100vw - #{$minWidth}px) / #{$widthCoef}));  font-size: $size; line-height: calc(#{$size} + #{$lineHeightDelta}px); }

Дописав этот «движковый» миксин, я сделал центральный миксин, который достаточно долго и использовался в наших проектах.

Неудобный и большой миксин для адаптирования шрифта из «движка»:

@mixin adaptiv-font($desktopFont, $laptopFont, $tabletFont, $mobileFont) {     @include adaptiv-font-engine(         list.nth($desktopFont, 1),         list.nth($laptopFont, 1),         list.nth($desktopFont, 2) - list.nth($desktopFont, 1),         $desktop-size-max,         $desktop-size-min     );      @include laptop-media() {         @include adaptiv-font-engine(             list.nth($laptopFont, 1),             list.nth($tabletFont, 1),             list.nth($laptopFont, 2) - list.nth($laptopFont, 1),             $laptop-size-max,             $laptop-size-min         );     }      @include tablet-media() {         @include adaptiv-font-engine(             list.nth($tabletFont, 1),             list.nth($mobileFont, 1),             list.nth($tabletFont, 2) - list.nth($tabletFont, 1),             $tablet-size-max,             $tablet-size-min         );     }      @include mobile-media() {         @include adaptiv-font-engine(             list.nth($mobileFont, 1),             list.nth($mobileFont, 1),             list.nth($mobileFont, 2) - list.nth($mobileFont, 1),             $mobile-size-max,             $mobile-size-min         );     } }

Центральный миксин для работы со шрифтами:

/* Mixin can get 1, 2, 3 and 4 arguments of tuple of font-size and line-height 1 - all 2 - other, mobile 3 - other, tablet, mobile 4 - desctop, laptop, tablet, mobile */ @mixin font-size($args...) {     @if (list.length($args) == 1) {         @include adaptiv-font(list.nth($args, 1), list.nth($args, 1), list.nth($args, 1), list.nth($args, 1));     } @else if (list.length($args) == 2) {         @include adaptiv-font(list.nth($args, 1), list.nth($args, 1), list.nth($args, 1), list.nth($args, 2));     } @else if (list.length($args) == 3) {         @include adaptiv-font(list.nth($args, 1), list.nth($args, 1), list.nth($args, 2), list.nth($args, 3));     } @else if (list.length($args) == 4) {         @include adaptiv-font(list.nth($args, 1), list.nth($args, 2), list.nth($args, 3), list.nth($args, 4));     } }

Пример работы с этим миксином:

@mixin M-Size() {     @include font-size((20, 26), (18, 22), (16, 20)); }  @mixin M-Medium() {     font-family: "Roboto-Medium";     @include M-Size(); }  @mixin M-Regular() {     font-family: "Roboto-Regular";     @include M-Size(); }

Первые проблемы

• Слишком страшный и сложно поддерживаемый код

  • Такое можно понять в силу вшитой адаптивности и логики в «резиновости» самого шрифта

• Также приходилось в конфигурации проекта глобально импортировать файл, который собирает вышеописанные миксины в одном месте:

  export default defineConfig({     plugins: [vue(), vueDevTools()],     css: {         preprocessorOptions: {             scss: {                 additionalData: `                     @import "@/assets/styles/global.scss";                 `,             },         },     }, }); 

  Это мне крайне не нравилось с точки зрения оптимизации CSS-перформанса

К этому добавлялись обновления самого CSS'а, за которыми SCSS'у приходилось следовать. Я говорю о нативном нестинге в CSS, который начали серьёзно обсуждать ещё с 128-го Chrome’а (примерно). Само собой такую технологию в будущем эту технологию поддержали и Safary и Mazilla.

И однажды прийдя на работу и обновив локальный модуль SASS'а я получил огромное полотно варнингов от него. Постоянно была жалоба на так называемый Legacy JS API. Мы смогли избавиться от них добавив в vite.config.js поле api: "modern-compiler" .

export default defineConfig({     plugins: [vue(), vueDevTools()],     css: {         preprocessorOptions: {             scss: {                 additionalData: `                     @import "@/assets/styles/global.scss";                 `,                 api: "modern-compiler",             },         },     }, });

Но беда не приходит одна и оказалось, что теперь нельзя использовать миксины посередине стилей, наподобе:

.some-class {   width: 100px;   height: 100px;    @include M-Medium();   color: current-color; }

Это рушило логику нативного нестинга уже CSS'а. Для эмитации похожего поведения приходилось ухитряться и писать следующим образом:

.some-class {   width: 100px;   height: 100px;    @include M-Medium();      & {     color: current-color;     } }

Что было ещё хуже, чем ранее написанные миксины. Было принято решение использовать подобные решения в крайне редких и нетривиальных ситуациях.

Но …

Через неделю SASS (Dart) выкатил новое обновление, в котором предупреждалось о скором отключении полных импортов из сторонних модулей — разрешается использовать только @use.

Меня в край задолбали такие быстрые и серьёзные изменения, а серверную консоль хочется видеть без варнингов, и пришлось серьёзно взяться за работу.

Переход на CSS

Изначально структура наших модулей была следующей:

Я принялся переносить все переменные и нормализующие стили на CSS. Но когда столкнулся с миксинами и в особенности с миксином «резинового» размера текста впал в ступор.

Спустя некоторое время я наткнулся на интересную концепцию виртуальных переменных в CSS. Смысл следующий – мы создаём переменную в рамках определённого атомарного класса, которая принимает значение из другой переменной, а также имеет значение по умолчанию на случай отсутствия переменной-аргумента. Для обозначения данной переменной как виртуальной и ограниченной в своём классе мы делаем очень простой модификатор, который используется уже не один год в языках без инкапсуляции классов – добавляем нижнее подчёркивание.

Пример:

.atom-class {   --_color: var(--color, #FFF);    color: var(--_color); }

<span class="my-text atom-class">Hallo, world!!!</span>

Таким образом мы можем контролировать поведение атомарного класса из родного класса тега.

Пример:

.my-text {   --color: #F00; }

Таким образом, мы можем создавать аналог миксинов на SCSS используя чистый CSS.

Продолжение идеи

Теперь вернёмся к нашим бараном, из-за которых весь сырбор.

Для более короткого решения приведу пример работы атамарного класса с адаптивным текстом (пока без резиновости):

[class*="static-font"] {     --_font-size: var(--font-size, 1em);     --_line-height: var(--line-height, calc(var(--_font-size) + 4px));      font-size: var(--_font-size);     line-height: var(--_line-height); }  .static-font__M {     --font-size: 20px;     --line-height: 26px;      @media (max-width: 1024px) and (min-width: 510px) {         --font-size: 18px;         --line-height: 22px;     }      @media (max-width: 509px) {         --font-size: 16px;         --line-height: 20px;     } }

Note: Необходимость в таком нестандартном селекторе [class*="static-font"] обоснована тем, что атомарный класс может располагаться в любом месте аттрибута class. Если же использовать [class^="static-font"], то это будет работать исключительно в случаях когда сам аттрибут начинается на описанную строку – class="static-font__M my-text".

Описанным способом можно создавать атомарные классы для множества стандартных размеров в рамках вашего дизайн-кода.

Для интересующихся оставлю ниже полностью переписанный на CSS вариант резинового текста:

[class*="responsive-font"] {     /* Require props */     --_max-font-size: var(--max-font-size);     --_max-line-height: var(--max-line-height);     --_max-screen-width: var(--max-screen-width);      --_min-font-size: var(--min-font-size);     --_min-line-height: var(--min-line-height);     --_min-screen-width: var(--min-screen-width);     /* ============= */      /* Computed deltas */     --font-delta: (var(--_max-font-size) - var(--_min-font-size));     --line-height-delta: (var(--_max-line-height) - var(--_min-line-height));     --screen-width-delta: (var(--_max-screen-width) - var(--_min-screen-width));     /* =============== */      --main-coef: (100vw - var(--_min-screen-width) * 1px) / var(--screen-width-delta);      /* Target values */     --computed-font-size: calc(var(--_min-font-size) * 1px + var(--font-delta) * var(--main-coef));     --computed-line-height: calc(var(--_min-line-height) + var(--line-height-delta) * var(--main-coef));     /* ============= */      font-size: clamp(calc(var(--_min-font-size) * 1px), var(--computed-font-size), calc(var(--_max-font-size) * 1px));     line-height: clamp(calc(var(--_min-line-height) * 1px), var(--computed-line-height), calc(var(--_max-font-size) * 1px)); }

.responsive-font__M {     --max-screen-width: var(--desktop-size-max);     --max-font-size: 20;     --max-line-height: 26;      --min-screen-width: var(--tablet-size-max);     --min-font-size: 18;     --min-line-height: 22;      @media (max-width: 1024px) and (min-width: 510px) {         --max-screen-width: var(--tablet-size-max);         --max-font-size: 18;         --max-line-height: 22;          --min-screen-width: var(--mobile-size-max);         --min-font-size: 16;         --min-line-height: 20;     }      @media (max-width: 509px) {         --max-screen-width: var(--mobile-size-max);         --max-font-size: 16;         --max-line-height: 20;          --min-screen-width: var(--mobile-size-min);         --min-font-size: 16;         --min-line-height: 20;     } }

:root {          /* ===== Desktop ===== */          --desktop-size-max: 1920;     --desktop-size-min: 1441;          /* =================== */          /* ===== Laptop ===== */          --laptop-size-max: 1440;     --laptop-size-min: 1025;          /* ================== */          /* ===== Tablet ===== */          --tablet-size-max: 1024;     --tablet-size-min: 510;          /* ================== */          /* ===== Mobile ===== */          --mobile-size-max: 509;     --mobile-size-min: 350;          /* ================== */ } 

К сожалению, логика резинового текста не позволила сделать реализацию короче и легче к прочтению, но данная реализация является менее нагруженной с точки зрения сборки проекта, перформанса самого CSS'а, а также является более удобной в использовании новому члену команды.

Развитие идеи

Мне так понравилась идея виртуальных переменных в CSS, что я решил не останавливаться на достигнутом и создал несколько похожих атомарных классов-миксинов:

.clamp-text-lines {     --_lines-count: var(--lines-count, 3);      display: -webkit-box;     -webkit-box-orient: vertical;     -webkit-line-clamp: var(--_lines-count);     overflow: hidden; }

.custom-scrollbar {     --_scrollbar-color: var(--scrollbar-color, #3E3E3E);     --_scrollbar-width: var(--scrollbar-width, 4px);     scrollbar-gutter: auto; }  .custom-scrollbar::-webkit-scrollbar {     width: var(--_scrollbar-width);     height: var(--_scrollbar-width); }  .custom-scrollbar::-webkit-scrollbar-thumb {     border-radius: 100px;     background-color: var(--_scrollbar-color); }  .custom-scrollbar::-webkit-scrollbar-track {     background-color: #0000;     border-radius: 100px; }

Заключение

Всем советую использовать классы подобного формата, но опять же с умом. Такой подход даёт возможность находу подправить нужный стиль, если не подходит выставленный по умолчанию, такие классы очень легко применять новым сотрудникам (им достаточно один раз увидеть как применяется класс).

А так же гибкость такого подхода подкрепляется нативным (низким) уровнем взаимодействия JS'а с CSS'ом, при необходимости изменить стили находу или по условию — больше никаких классов модификаторов (это, конечно же, тоже в меру).

Анонс

Думаю на следующей неделе выпустить вторую часть данной серии по нативным popover'ам и их анимацией.

Буду рад вашей обратной связи.