Добавляет статью про Псевдоприватные кастомные свойства #5577
Conversation
Alex-Andr-19
requested review from
solarrust,
HellSquirrel and
TatianaFokina
as code owners
solarrust
changed the title
Alex-Andr-19
changed the title
This comment was marked as resolved.
This comment was marked as resolved.
Co-authored-by: Matvey Romanov <[email protected]>
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
@Inventoris Хорошо, спасибо за совет |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Co-authored-by: Alena Batitskaia <[email protected]>
Co-authored-by: Alena Batitskaia <[email protected]>
|
@solarrust Переработал статью под формат CSS статей. За основу взял кастомные свойства. Надеюсь в этот раз получилось по лучше) |
TatianaFokina
requested review from
baileys-li,
solarrust,
ra1nbow1 and
Inventoris
There was a problem hiding this comment.
Принесла небольшие правки по тексту. Ничего глобального, смысл не должен был нарушиться.
Получилось очень круто! Спасибо тебе =)
От меня аппрув.
Зову @skorobaeus помочь с демками 🧚♀️
There was a problem hiding this comment.
Привет! С демками всё хорошо :) К ним только нужно прикрутить стили отсюда: https://github.com/doka-guide/content/blob/main/docs/demos/style.md
Нам потребуются цвета и шрифты. Если возникнут сложности, я сделаю всё сама, но, видимо, уже после того, как уйдёт рассылка :)
Превью контента из 2981f7f опубликовано. |
There was a problem hiding this comment.
Привет ещё раз!
Я покрутила демки, прочитала текст, прочитала обсуждение выше и у меня возникло много вопросов. При этом цель любого материала в Доке обратная: отвечать на вопросы, а не порождать новые.
У док и статей есть типовая структура, давай попробуем её соблюсти.
Эту статью очень украсит вводная часть, но не формальная, для галочки, а по существу. В такой вводной части первым делом стоит объяснить простыми словами что такое псевдоприватные кастомные свойства. Рассказать, зачем они нужны: чтобы изолировать стили, избегать конфликтов, давать пользователям рычаги для настройки компонентов, не трогая внутреннюю логику, и т.д. И наконец, отметить, что это синтаксический сахар и показать, как пишется. Чем чётче и яснее здесь пример кода, тем лучше; он не обязан быть связан с демкой.
После вводной части переходим к разбору практического примера: ставим задачу (вёрстка карточек), обозначаем проблему (код раздувается до нечитаемости, из-за взаимозависимостей стилей его становится очень легко сломать), опционально (!) нагнетаем ситуацию (если прикрутить миксины, то получится жесть ваще бррр), даём решение проблемы (показываем идентичный результат на чистом CSS).
Наконец, завершаем статью: договариваем всё, о чём не договорили, делаем выводы.
Прости, пожалуйста, за такую простыню фидбека 😅 Я очень обрадовалась возможности избавиться от миксинов и теперь очень хочу, чтобы из этой статьи получилась конфетка :)
| При таком подходе объём кода увеличился и читаемость стала значительно ниже. Также прямое использование кастомных свойств не дало возможности увеличить количество классов. | ||
|
|
||
| В таком случае очень хочется применить миксины или функции из препроцессоров. | ||
|
|
||
| Приносить в проект препроцессоры для решения задачи перекраски карточек не выглядит как разумное решение. |
There was a problem hiding this comment.
Поставим себя на место читателя. Это человек, который слышал про "псевдоприватные кастомные свойства" вскользь, а, может, и не слышал вовсе, и вот теперь он пришёл к нам узнать, что же это такое.
К этому моменту читатель промотал уже 4 экрана, и всё ещё не увидел ответа на вопрос: что такое псевдоприватные кастомные свойства? Мы добавим вводную часть и обязательно ответим на этот и другие вопросы, а пока поработаем с примером, в код которого читателю предлагается вникнуть.
Вообще, пример — это очень хорошо! Фронтенд это не теория :) Но не очень хорошо, когда пример сопровождается такими пояснениями как "очевидно", "очень хочется применить N", "не выглядит как разумное решение". Давай по-маленьку избавимся от таких "заходов" и станет лучше :)
Не будем говорить "очевидно", а покажем пример. Очевидным примером может быть сравнение двух фрагментов кода, делающих одно и то же, где один фрагмент короче и/или проще другого в несколько раз. Как читатель, я действительно глазами вижу разницу и мне становится интересно, как добиться такого результата.
Не будем говорить "очень хочется применить миксины или функции препроцессоров, но это неразумное решение", а подтолкнём читателя к тому, чтобы сделать этот вывод самостоятельно. Ведь если всё то же самое можно сделать на чистом CSS, то зачем тянуть препроцессоры?
| ## Что такое псевдоприватность? | ||
|
|
||
| В языках программирования, которые не имеют в своём движке инкапсуляцию полей и методов, принято использовать псевдоприватность, которая основывается на нейминге. | ||
|
|
||
| Например, в JavaScript и Python принято писать нижнее подчёркивание перед самим именем поля или метода: | ||
|
|
||
| ```js | ||
| const someObj = { | ||
| publicValue: 42, | ||
| _privateValue: "42" | ||
| } | ||
| ``` | ||
|
|
||
| Также существует вариант с подчеркиванием в конце имени. | ||
|
|
||
| Если разработчик захочет напрямую обратиться к полям с подобным названием, то TypeScript будет выбрасывать ошибки. | ||
|
|
||
| ## Псевдоприватность в CSS | ||
|
|
||
| Кастомные свойства CSS наследуются внутрь всех дочерних элементов по умолчанию. | ||
|
|
||
| Также нет возможности инкапсулировать свойство для конкретного класса: | ||
|
|
||
| ```html | ||
| <div class="first second"></div> | ||
| ``` | ||
|
|
||
| Все кастомные свойства, которые определены в классе `first`, будут также доступны для чтения и изменения в классе `second`. | ||
|
|
||
| В этот момент и возникает необходимость псевдоприватности кастомных свойств. | ||
|
|
||
| ```html | ||
| <div class="product-card new"> | ||
| Карточка 1 | ||
| </div> | ||
| ``` | ||
|
|
||
| ```css | ||
| .product-card { | ||
| --_background-color: #46ad8e; | ||
| --_border-radius: 12px; | ||
|
|
||
| background-color: var(--_background-color); | ||
| border-radius: var(--_border-radius); | ||
| box-shadow: 4px 5px 5px 1px hsl(from var(--_background-color) h s calc(l * 0.8)); | ||
| } | ||
|
|
||
| .new { | ||
| --background-color: #45b9bb; | ||
|
|
||
| box-shadow: 4px 5px 5px 1px hsl(from var(--background-color) h s calc(l * 0.8)); | ||
| } | ||
| ``` | ||
|
|
||
| В данном случае мы видим, что в разных классах существуют незвисимые кастомные свойства. В классе `product-card` свойства «закрыты» псевдоприватностью. | ||
|
|
||
| При всём этом цвет тени напрямую зависит от цвета фона в каждом из классов. | ||
|
|
||
| Фактически значение [`box-shadow`](/css/box-shadow/) зависит только от кастомного свойства. |
There was a problem hiding this comment.
Эти две секции могут стать основой для вводной части статьи.
| ## Решение поставленной задачи | ||
|
|
||
| ```css | ||
| .product-card { | ||
| /* Псевдоприватное кастомное свойство */ | ||
| --_background-color: var(--background-color, #123E66); | ||
| /* ---------------------------------- */ | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| background-color: var(--_background-color); | ||
| box-shadow: 2px 5px 5px 0 hsl(from var(--_background-color) h s calc(l * 0.7)); | ||
|
|
||
| font-size: 48px; | ||
| color: hsl(from var(--_background-color) 0 0 calc((50 - l) * 100)); | ||
|
|
||
| &.new { | ||
| /* Значение псевдоприватного кастомного свойства */ | ||
| --background-color: #2E9AFF; | ||
| /* --------------------------------------------- */ | ||
| } | ||
| &.top { | ||
| /* Значение псевдоприватного кастомного свойства */ | ||
| --background-color: #F498AD; | ||
| /* --------------------------------------------- */ | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| <iframe title="Решение с псевдоприватными свойствами" src="demos/pseudo-privates/" height="350"></iframe> |
There was a problem hiding this comment.
Так как это статья, а не рецепт, то нет смысла отрывать финальный фрагмент кода на псевдо-приватных свойствах и уносить его в конец. Это часть того очевидного примера, который делает нашу жизнь проще, без препроцессоров.
| ## Как псевдоприватность может заменить миксины препроцессоров? | ||
|
|
||
| Выше описан способ «передачи» кастомных свойств в другие между смежными классами. | ||
|
|
||
| Такое можно сравнить с передачей аргументов функции или, в контексте стилей, миксину препроцессора. | ||
|
|
||
| Аналогия с миксинами: | ||
|
|
||
| 1. Имя миксина — имя атомарного класса. | ||
| 1. Стили миксина — стили атомарного класса. | ||
| 1. Аргумент — кастомное свойство, принимаемое псевдоприватным. | ||
| 1. Внутренняя переменная — псевдоприватное кастомное свойство. |
There was a problem hiding this comment.
Это завершающая часть статьи: проводим аналогии и подводим итог.
Описание
Создание статьи в раздел Рецепты про перенос миксинов SASS'а на переменные CSS в атомарных классах.
Превью: https://content-5577.dev.doka.guide/css/pseudo-private-custom-property/
Чек-лист
/css/color/,/tools/json/,/tools/gulp/#kak-ponyat)images/example.png,demos/example/,../demos/example/)