Добавляет статью про Псевдоприватные кастомные свойства #5577
Conversation
Alex-Andr-19
requested review from
solarrust,
HellSquirrel and
TatianaFokina
as code owners
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, реализовать два свойства и все будет работать
solarrust
changed the title
Alex-Andr-19
changed the title
|
@solarrust @HellSquirrel @TatianaFokina девочки, привет! Может покажусь каким-то негативно настроенным, но вам не кажется, что повествование от первого лица выглядит не совсем уместно? 😁 |
Co-authored-by: Matvey Romanov <38384967+ra1nbow1@users.noreply.github.com>
Жду обратной связи. Если надо – поправлю. Сам думаю, что не уместно было делать акцент на первом лице. |
There was a problem hiding this comment.
@Alex-Andr-19 Привет!
Во-первых, большое спасибо тебе за статью 🌟
Во-вторых, вот что думаю: я пробежался по изменениям, и там довооольно много чего стоит пересмотреть. Я предлагаю тебе для начала взглянуть на документацию, особенно заострить внимание на структуре статьи и стайлгайде. Затем прочесть 5-10 любых статей на Доке, лучше из раздела рецепты (ты ведь туда хочешь сделать вклад?), и обратить внимание на общий вайб, на подход к изложению итд. А потом оценить материал самостоятельно ещё раз, хорошо?
|
@Inventoris Хорошо, спасибо за совет |
|
Всем привет, сейчас решил изменить подход к объяснению технологии ( как и говорил @Inventoris ), но долго не мог найти достойный пример. Понимаю, что статья далеко не в финальной версии, но хочу получить обратную связь по примеру и, возможно, советы по улучшению демонстрационного показателя примера, чтобы читателю было понятно в каких случаях она пригодится. |
Превью контента из 6e6fd67 опубликовано. |
Кажется, это этакий синтаксический сахар, который не добавляет новой функциональности, а улучшает старую. Так что можно показать, как псевдоприватные свойства работают в каком-нибудь популярном кастомном компонентике, о котором ещё нет рецепта. @solarrust, @skorobaeus, есть какие-то идеи, что за копонент можно сделать для рецепта? Другой и более простой вариант — перенести материал в раздел CSS, тут @solarrust лучше подскажет, как его лучше обозвать там и в какой подразделе лучше хранить. |
|
@TatianaFokina Согласен на счёт возможности переноса в тему CSS. Думаю в том виде, к которому пришла статья, она действительно будет более уместна. |
Описание
Создание статьи в раздел Рецепты про перенос миксинов SASS'а на переменные CSS в атомарных классах.
https://content-5577.dev.doka.guide/recipes/pseudo-private-custom-property/
Чек-лист
/css/color/,/tools/json/,/tools/gulp/#kak-ponyat)images/example.png,demos/example/,../demos/example/)