From 82c62dd7fc5ce04081628ec9adf778a6ff0aaed7 Mon Sep 17 00:00:00 2001 From: Alex-Andr-19 Date: Fri, 6 Dec 2024 09:10:52 +0300 Subject: [PATCH 1/6] feat: Create article about virtual variables --- recipes/virtual-variables/index.md | 156 +++++++++++++++++++++++++++++ 1 file changed, 156 insertions(+) create mode 100644 recipes/virtual-variables/index.md diff --git a/recipes/virtual-variables/index.md b/recipes/virtual-variables/index.md new file mode 100644 index 0000000000..6dc8cd2096 --- /dev/null +++ b/recipes/virtual-variables/index.md @@ -0,0 +1,156 @@ +--- +title: "Виртуальные переменные" +descriptioin: "Как создать миксины на CSS" +--- + +## Введение + +Веб-платформа не стоит на месте и стремительно развивается. Относительно недавно был принят стандарт **нативного нестинга в CSS**. +Раньше такая технология была только в препроцессорах и позволяла весьма удобно работать с БЭМом: + +```scss +.parent-block { + ... + + &__child-element { + ... + + &_modificator-1 { ... } + &_modificator-2 { ... } + &_modificator-3 { ... } + } +} +``` + +Ранее уникальной для препроцессоров таких как **Less, SASS и Stylus** была возможность создавать переменные прямо в стилях, что не мог предоставить CSS. +Но этот пункт относительно давно перестал быть уникальной частью этих библиотек – были созданы `custom variables` в CSS'е: + +```css +:root { + --text-primary: #ffffff; + --text-secondary: #999999; + + --text-negative: #f00000; +} + +span.error { + color: var(--text-negative); +} +``` + +## Проблемы миксинов + +Возвращаясь к теме с **нативным нестингом в CSS**, я не могу не сказать о возникших сложностях в работе с последними версиями препроцессоров (в моём случае с SASS'ом). + +Сразу оговорю – дальше будет показан код на SCSS в режиме `api: "modern-compiler"`. + +В нативном нестинге CSS'а считается невалидной следующая ситуация: + +```css +.parent-block { + display: flex; + + &__child-element { + ...; + } + + gap: 20px; +} +``` + +в отличии от SASS'а. + +Я полностью поддерживаю данное решение, потому что такая ситуация рушит читаемость кода. +Но в SASS'е такая ситуация вполне возможна на уровне интерпритации в CSS. Пример: + +```scss +.parent-block { + display: flex; + @include child-element-mixin; + gap: 20px; +} +``` + +В последних версиях SASS начинает кидать варнинги на такие кейсы. + +## Решение + +На случай неуникальных, но достаточно больших стилей с возможностью кастомизации я нашёл, как мне кажется, хорошее решение. + +В CSS при выозове переменной через функцию `var()` можно передать второй аргумент, который вернётся, если переменная отсутствует: + +```css +color: var(--text-primary, #ddd); +``` + +Пытаясь найти способ реализовать миксины на CSS'е, я набрёл на видео (ссылку потерял), в котором была концепция "виртуальных" CSS переменных. Пример: + +```css +span.plain-text { + --_text-color: var(--text-color, #ddd); + color: var(--_text-color); +} +``` + +Смысл в том, чтобы использовать атомарный класс как имя миксина, а в качестве аргументов для нашего +атомарного класса будут CSS переменные, которые возвращаются в переменные, которые уже и применяются. + +Пример возможности кастомизации миксина выше: +```html +Text +``` +```css +.plain-text { + --_text-color: var(--text-color, #ddd); + color: var(--_text-color); +} + +.description { + --text-color: #fff; +} +``` + +## Применение + +Я понял какой потенциал стоит за таким подходом я решил применить это к стилизации размера текста: + +```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; + } +} +``` + +Так как 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; +} +``` \ No newline at end of file From c6ec4cbf005a1b60de4775e5b865f5c4c0970e51 Mon Sep 17 00:00:00 2001 From: Alex-Andr-19 Date: Fri, 6 Dec 2024 19:55:57 +0300 Subject: [PATCH 2/6] fix: Some fixes --- recipes/virtual-variables/index.md | 58 +++++++++++++++--------------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/recipes/virtual-variables/index.md b/recipes/virtual-variables/index.md index 6dc8cd2096..fe85267ab8 100644 --- a/recipes/virtual-variables/index.md +++ b/recipes/virtual-variables/index.md @@ -1,5 +1,5 @@ --- -title: "Виртуальные переменные" +title: "Псевдоприватные кастомные свойства" descriptioin: "Как создать миксины на CSS" --- @@ -23,7 +23,7 @@ descriptioin: "Как создать миксины на CSS" ``` Ранее уникальной для препроцессоров таких как **Less, SASS и Stylus** была возможность создавать переменные прямо в стилях, что не мог предоставить CSS. -Но этот пункт относительно давно перестал быть уникальной частью этих библиотек – были созданы `custom variables` в CSS'е: +Но этот пункт относительно давно перестал быть уникальной частью этих библиотек – были созданы `custom properties` в CSS'е: ```css :root { @@ -77,13 +77,13 @@ span.error { На случай неуникальных, но достаточно больших стилей с возможностью кастомизации я нашёл, как мне кажется, хорошее решение. -В CSS при выозове переменной через функцию `var()` можно передать второй аргумент, который вернётся, если переменная отсутствует: +В CSS при взятии свойства через функцию `var()` можно передать второй аргумент, который вернётся, если свойство отсутствует: ```css color: var(--text-primary, #ddd); ``` -Пытаясь найти способ реализовать миксины на CSS'е, я набрёл на видео (ссылку потерял), в котором была концепция "виртуальных" CSS переменных. Пример: +Пытаясь найти способ реализовать миксины на CSS'е, я набрёл на [видео](https://youtu.be/_2LwjfYc1x8?si=BvJFLYqov2LHI01X), в котором была показана концепция "псевдоприватных" CSS свойств. Пример: ```css span.plain-text { @@ -92,13 +92,15 @@ span.plain-text { } ``` -Смысл в том, чтобы использовать атомарный класс как имя миксина, а в качестве аргументов для нашего -атомарного класса будут CSS переменные, которые возвращаются в переменные, которые уже и применяются. +Смысл в том, чтобы использовать атомарный класс как имя миксина, а в качестве аргументов для нашего +атомарного класса будут CSS свойства, которые возвращаются в псевдоприватные свойства, которые уже и применяются. Пример возможности кастомизации миксина выше: + ```html Text ``` + ```css .plain-text { --_text-color: var(--text-color, #ddd); @@ -106,7 +108,7 @@ span.plain-text { } .description { - --text-color: #fff; + --text-color: #fff; } ``` @@ -116,41 +118,41 @@ span.plain-text { ```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, 1em); + --_line-height: var(--line-height, calc(var(--_font-size) + 4px)); - font-size: var(--_font-size); - line-height: var(--_line-height); + font-size: var(--_font-size); + line-height: var(--_line-height); } .static-font__M { - --font-size: 20px; - --line-height: 26px; + --font-size: 20px; + --line-height: 26px; - @media (max-width: 1024px) and (min-width: 510px) { - --font-size: 18px; - --line-height: 22px; - } + @media (width <= 1024px) and (width >= 510px) { + --font-size: 18px; + --line-height: 22px; + } - @media (max-width: 509px) { - --font-size: 16px; - --line-height: 20px; - } + @media (max-width < 510px) { + --font-size: 16px; + --line-height: 20px; + } } ``` -Так как CSS переменные возможно переопределять в медиа запросах, реализация отдельно размера шрифта выглядит +Так как CSS свойства возможно переопределять в медиа запросах, реализация отдельно размера шрифта выглядит лаконично и понятно. И вот ещё один небольшой "миксин" для обрезания количества строк: ```css .clamp-text-lines { - --_lines-count: var(--lines-count, 3); + --_lines-count: var(--lines-count, 3); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: var(--_lines-count); - overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--_lines-count); + overflow: hidden; } -``` \ No newline at end of file +``` From a47bbf18b41f26db2f5e3f79abc52ea3cbb7916d Mon Sep 17 00:00:00 2001 From: Alex-Andr-19 <63049769+Alex-Andr-19@users.noreply.github.com> Date: Fri, 6 Dec 2024 22:54:04 +0300 Subject: [PATCH 3/6] Update recipes/virtual-variables/index.md Co-authored-by: Matvey Romanov <38384967+ra1nbow1@users.noreply.github.com> --- recipes/virtual-variables/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/recipes/virtual-variables/index.md b/recipes/virtual-variables/index.md index fe85267ab8..fc231b6a2e 100644 --- a/recipes/virtual-variables/index.md +++ b/recipes/virtual-variables/index.md @@ -6,7 +6,7 @@ descriptioin: "Как создать миксины на CSS" ## Введение Веб-платформа не стоит на месте и стремительно развивается. Относительно недавно был принят стандарт **нативного нестинга в CSS**. -Раньше такая технология была только в препроцессорах и позволяла весьма удобно работать с БЭМом: +Раньше такая технология была только в [препроцессорах](/tools/preprocessors/) и позволяла весьма удобно работать с БЭМом: ```scss .parent-block { From d108002ca18a6ef2cc39699a21de515fd08d428e Mon Sep 17 00:00:00 2001 From: Alex-Andr-19 Date: Tue, 24 Dec 2024 09:01:07 +0300 Subject: [PATCH 4/6] fix: Change concept of technology presentation --- .../demos/products-demo/index.html | 50 ++++++ .../demos/text-demo/index.html | 86 ++++++++++ .../demos/text-demo/style.css | 57 +++++++ .../pseudo-private-custom-property/index.md | 55 ++++++ recipes/virtual-variables/index.md | 158 ------------------ 5 files changed, 248 insertions(+), 158 deletions(-) create mode 100644 recipes/pseudo-private-custom-property/demos/products-demo/index.html create mode 100644 recipes/pseudo-private-custom-property/demos/text-demo/index.html create mode 100644 recipes/pseudo-private-custom-property/demos/text-demo/style.css create mode 100644 recipes/pseudo-private-custom-property/index.md delete mode 100644 recipes/virtual-variables/index.md diff --git a/recipes/pseudo-private-custom-property/demos/products-demo/index.html b/recipes/pseudo-private-custom-property/demos/products-demo/index.html new file mode 100644 index 0000000000..077902786a --- /dev/null +++ b/recipes/pseudo-private-custom-property/demos/products-demo/index.html @@ -0,0 +1,50 @@ + + + + + + Products Demo + + + + +
+
+
+
+
+
+ + diff --git a/recipes/pseudo-private-custom-property/demos/text-demo/index.html b/recipes/pseudo-private-custom-property/demos/text-demo/index.html new file mode 100644 index 0000000000..4bb76f1660 --- /dev/null +++ b/recipes/pseudo-private-custom-property/demos/text-demo/index.html @@ -0,0 +1,86 @@ + + + + + + Document + + + + + + +

Lorem, ipsum dolor.

+ +
+
+

Lorem ipsum dolor sit amet.

+ +

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam unde + perspiciatis debitis corporis odit illo ducimus quasi qui saepe + consectetur, necessitatibus veritatis fugiat esse architecto delectus + exercitationem. Dolores recusandae officia quaerat illo. +

+
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing. +

+ +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit vero + aut, aliquid quas voluptatibus quos, libero soluta qui et odio + voluptatum dolor maiores veniam adipisci placeat facilis + necessitatibus ducimus hic repudiandae. Modi optio natus saepe + asperiores quos eligendi consequuntur, numquam fuga voluptatem sed + rerum. +

+
+
+ + diff --git a/recipes/pseudo-private-custom-property/demos/text-demo/style.css b/recipes/pseudo-private-custom-property/demos/text-demo/style.css new file mode 100644 index 0000000000..c09cd56a00 --- /dev/null +++ b/recipes/pseudo-private-custom-property/demos/text-demo/style.css @@ -0,0 +1,57 @@ +* { + box-sizing: border-box; +} + +[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__XL { + --font-size: 36px; + --line-height: 42px; + + @media (width <=1024px) and (width >=510px) { + --font-size: 30px; + --line-height: 36px; + } + + @media (max-width < 510px) { + --font-size: 26px; + --line-height: 30px; + } +} + +.static-font__L { + --font-size: 28px; + --line-height: 36px; + + @media (width <=1024px) and (width >=510px) { + --font-size: 24px; + --line-height: 30px; + } + + @media (max-width < 510px) { + --font-size: 18px; + --line-height: 20px; + } +} + +.static-font__M { + --font-size: 20px; + --line-height: 26px; + + @media (width <=1024px) and (width >=510px) { + --font-size: 18px; + --line-height: 22px; + } + + @media (max-width < 510px) { + --font-size: 16px; + --line-height: 20px; + } +} + diff --git a/recipes/pseudo-private-custom-property/index.md b/recipes/pseudo-private-custom-property/index.md new file mode 100644 index 0000000000..d9005ab6ff --- /dev/null +++ b/recipes/pseudo-private-custom-property/index.md @@ -0,0 +1,55 @@ +--- +title: "Псевдоприватные кастомные свойства" +descriptioin: "Как создать миксины на CSS" +--- + +## Задача + +В силу перехода CSS к нативному нестингу, а также из-за естественного развития CSS многие +преимущества препроцессоров стали отходить на второй план. Сначала появились кастомные свойства, следом произошёл взрыв CSS функций (`color-mix`, `counter`, тригонометрические функции и т.д.). + +С появление таких возможностей некоторым разработчикам хочется отказаться и от других технологий из препроцессоров – миксины. Некоторые особенности миксинов всё ещё заменить невозможно, но есть решение, которое заменит собой большую часть миксинов – псевдоприватные кастомные свойства. + +## Решение + +```html +
+
+
+
+
+
+
+``` + +```css +.product-list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 12px; + + .product-list__item { + width: 100%; + aspect-ratio: 4/5; + } +} + +.product-card { + --_background-color: var(--background-color, #46ad8e); + --_border-color: var(--border-color, #ffffff); + + background-color: var(--_background-color); + border: 1px solid var(--_border-color); + border-radius: 12px; + + &.secondary { + --background-color: #999999; + } + + &.advertisment { + --background-color: #efcf2f; + } +} +``` + + From 6e6fd6748b320d9fe1952ab3c20153d260fb65b0 Mon Sep 17 00:00:00 2001 From: TatianaFokina Date: Wed, 25 Dec 2024 22:09:41 +0400 Subject: [PATCH 6/6] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BF=D0=B0=D0=BF=D0=BA=D1=83=20=D0=B0=D0=B2?= =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- people/alex-andr-19/index.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 people/alex-andr-19/index.md diff --git a/people/alex-andr-19/index.md b/people/alex-andr-19/index.md new file mode 100644 index 0000000000..a5d7f6c957 --- /dev/null +++ b/people/alex-andr-19/index.md @@ -0,0 +1,6 @@ +--- +name: 'Алекс' +url: https://github.com/Alex-Andr-19 +badges: + - first-contribution-small +---