Добавляет статью про Псевдоприватные кастомные свойства #5577
Conversation
Alex-Andr-19
requested review from
solarrust,
HellSquirrel and
TatianaFokina
as code owners
recipes/virtual-variables/index.md
Outdated
| ``` | ||
|
|
||
| Ранее уникальной для препроцессоров таких как **Less, SASS и Stylus** была возможность создавать переменные прямо в стилях, что не мог предоставить CSS. | ||
| Но этот пункт относительно давно перестал быть уникальной частью этих библиотек – были созданы `custom variables` в CSS'е: |
There was a problem hiding this comment.
Душнота:
Всё таки называть кастомные свойства кастомными переменными не совсем корректно. Посколько это именно свойства. Они наследуются и позволяют делать вещи, которые не мсогут сделать препроцессоры так же изящно. Старое видео Макеева по теме
There was a problem hiding this comment.
Спасибо, обязательно исправлю
recipes/virtual-variables/index.md
Outdated
| Пытаясь найти способ реализовать миксины на CSS'е, я набрёл на видео (ссылку потерял), в котором была концепция "виртуальных" CSS переменных. Пример: | ||
|
|
||
| ```css | ||
| span.plain-text { | ||
| --_text-color: var(--text-color, #ddd); |
There was a problem hiding this comment.
Это так называемые sudo кастомные свойства / псевдо приватные кастомные свойства
Скорее всего речь про видео Кевина Повелла
Так же оригинальный рецепт Леи Веру
There was a problem hiding this comment.
Да, именно из этого видео взял идею. Обязательно вставлю как источник
recipes/virtual-variables/index.md
Outdated
| Я понял какой потенциал стоит за таким подходом я решил применить это к стилизации размера текста: | ||
|
|
||
| ```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 { |
There was a problem hiding this comment.
Вне контекста этот код выглядит перегруженным и нарушением принципа KISS.
Не понятно, что мешает сделать так
<span class="static-font another-class">Lorem ipsum</span>.static-font {
font-size: 1em;
line-height: calc(1em + 4px);
}
.another-class {
font-size: 20px;
line-height: 26px;
}То есть старый добрый каскад даёт тот же эффект при меньшем коде.
Обычно приватные кастомные свойства нужны для компонентных фреймворков, где ты не можешь быть на 100% уверен в каком порядке сборщик соберёт стили. И в итоге тебе, чтобы гарантировано перебить внутренние стили компонента нужно либо перебивать вес селектора, либо делать кастомные свойства с дефолтом (в том числе и псевдо приватные), либо разбить по css слоям, если браузерная поддержка позволяет.
There was a problem hiding this comment.
Таким образом, как описал я, в проект может зайти новый разработчик, увидеть все стандартные размеры текста, которые описаны в дизайн системе и легко их применить, воткнув всего один класс.
Так же, если понадобиться создать что-то отличающееся от стандартных шрифтов ему достаточно создать класс который будет иметь в своем названии static-font, реализовать два свойства и все будет работать
recipes/virtual-variables/index.md
Outdated
| @media (max-width: 1024px) and (min-width: 510px) { | ||
| --font-size: 18px; | ||
| --line-height: 22px; | ||
| } | ||
|
|
||
| @media (max-width: 509px) { |
There was a problem hiding this comment.
nit: статья всё-таки про развитие css, можно использовать более понятный синтаксис
| @media (max-width: 1024px) and (min-width: 510px) { | |
| --font-size: 18px; | |
| --line-height: 22px; | |
| } | |
| @media (max-width: 509px) { | |
| @media (width <= 1024px) and (width >= 510px) { | |
| --font-size: 18px; | |
| --line-height: 22px; | |
| } | |
| @media (width < 510px) { |
There was a problem hiding this comment.
Спасибо большое, сам не знал, теперь буду использовать
solarrust
changed the title
Alex-Andr-19
changed the title
|
@solarrust @HellSquirrel @TatianaFokina девочки, привет! Может покажусь каким-то негативно настроенным, но вам не кажется, что повествование от первого лица выглядит не совсем уместно? 😁 |
Co-authored-by: Matvey Romanov <[email protected]>
Превью контента из a47bbf1 опубликовано. |
Жду обратной связи. Если надо – поправлю. Сам думаю, что не уместно было делать акцент на первом лице. |
There was a problem hiding this comment.
@Alex-Andr-19 Привет!
Во-первых, большое спасибо тебе за статью 🌟
Во-вторых, вот что думаю: я пробежался по изменениям, и там довооольно много чего стоит пересмотреть. Я предлагаю тебе для начала взглянуть на документацию, особенно заострить внимание на структуре статьи и стайлгайде. Затем прочесть 5-10 любых статей на Доке, лучше из раздела рецепты (ты ведь туда хочешь сделать вклад?), и обратить внимание на общий вайб, на подход к изложению итд. А потом оценить материал самостоятельно ещё раз, хорошо?
|
@Inventoris Хорошо, спасибо за совет |
Описание
Создание статьи в раздел Рецепты про перенос миксинов SASS'а на переменные CSS в атомарных классах
Чек-лист
/css/color/,/tools/json/,/tools/gulp/#kak-ponyat)images/example.png,demos/example/,../demos/example/)