Добавляет статью про Псевдоприватные кастомные свойства #5577

Alex-Andr-19 · 2024-12-06T06:14:27Z

Описание

Создание статьи в раздел Рецепты про перенос миксинов 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/)

recipes/virtual-variables/index.md

Co-authored-by: Matvey Romanov <[email protected]>

Alex-Andr-19 · 2024-12-10T14:50:19Z

@Inventoris Хорошо, спасибо за совет

Co-authored-by: Alena Batitskaia <[email protected]>

solarrust

Принесла небольшие правки по тексту. Ничего глобального, смысл не должен был нарушиться.

Получилось очень круто! Спасибо тебе =)

От меня аппрув.
Зову @skorobaeus помочь с демками 🧚‍♀️

skorobaeus

Привет! С демками всё хорошо :) К ним только нужно прикрутить стили отсюда: https://github.com/doka-guide/content/blob/main/docs/demos/style.md

Нам потребуются цвета и шрифты. Если возникнут сложности, я сделаю всё сама, но, видимо, уже после того, как уйдёт рассылка :)

skorobaeus

Привет ещё раз!

Я покрутила демки, прочитала текст, прочитала обсуждение выше и у меня возникло много вопросов. При этом цель любого материала в Доке обратная: отвечать на вопросы, а не порождать новые.

У док и статей есть типовая структура, давай попробуем её соблюсти.

Эту статью очень украсит вводная часть, но не формальная, для галочки, а по существу. В такой вводной части первым делом стоит объяснить простыми словами что такое псевдоприватные кастомные свойства. Рассказать, зачем они нужны: чтобы изолировать стили, избегать конфликтов, давать пользователям рычаги для настройки компонентов, не трогая внутреннюю логику, и т.д. И наконец, отметить, что это синтаксический сахар и показать, как пишется. Чем чётче и яснее здесь пример кода, тем лучше; он не обязан быть связан с демкой.

После вводной части переходим к разбору практического примера: ставим задачу (вёрстка карточек), обозначаем проблему (код раздувается до нечитаемости, из-за взаимозависимостей стилей его становится очень легко сломать), опционально (!) нагнетаем ситуацию (если прикрутить миксины, то получится жесть ваще бррр), даём решение проблемы (показываем идентичный результат на чистом CSS).

Наконец, завершаем статью: договариваем всё, о чём не договорили, делаем выводы.

Прости, пожалуйста, за такую простыню фидбека 😅 Я очень обрадовалась возможности избавиться от миксинов и теперь очень хочу, чтобы из этой статьи получилась конфетка :)

css/pseudo-private-custom-property/index.md

Alex-Andr-19 · 2025-02-11T19:26:54Z

@skorobaeus Спасибо большое за такую крутую обратную связь! Мне это действительно важно – нужно учиться писать красиво)

Alex-Andr-19 · 2025-02-13T05:44:59Z

@skorobaeus Добавил вводную часть. Надеюсь вышло по-лучше)

Alex-Andr-19 · 2025-02-17T07:28:30Z

@skorobaeus Извини, что лишний раз пишу, но я очень жду ревью.

skorobaeus

Привет! Спасибо тебе большое за быстрый отклик!

Мне кажется, стало очень последовательно и понятно ❤ Я немного покомментировала и позадавала последние вопросы. Надо с ними разобраться, а дальше только с запятыми пройдусь и будет огонь!

css/pseudo-private-custom-property/index.md

Co-authored-by: Svetlana Korobtseva <[email protected]>

Alex-Andr-19 · 2025-02-21T05:18:33Z

@skorobaeus Внёс все нужные правки

skorobaeus

Ура, получилось шикарно! Спасибо тебе огромное за работу ❤

Alex-Andr-19 · 2025-02-25T05:34:25Z

@ra1nbow1 @Inventoris @baileys-li Жду ваших ревью)

ra1nbow1

Привет! Оставил пару комментариев

css/pseudo-private-custom-property/index.md

ra1nbow1 · 2025-02-25T06:13:28Z

css/pseudo-private-custom-property/demos/pseudo-privates/index.html

+      .product-card {
+        --_background-color: var(--background-color, #123E66);
+
+        --_lighter-color: hsl(from var(--_background-color) h s calc(l * 1.3));


Здесь используется l, давай в коде ее объявим

Так работает функция hsl, я же не объявлял h и s. Функция предоставляет интерфейс работы с цветом, который передан первым аргументом, через пространство hsl, где h, s, l будут конкретными числами

Co-authored-by: Matvey Romanov <[email protected]>

github-actions · 2025-02-25T07:03:33Z

Превью контента из 36c9500 опубликовано.

feat: Create article about virtual variables

82c62dd

Alex-Andr-19 requested review from solarrust, HellSquirrel and TatianaFokina as code owners December 6, 2024 06:14

github-actions bot added the рецепт Контент для Рецептов label Dec 6, 2024

Inventoris assigned Alex-Andr-19 Dec 6, 2024

baileys-li reviewed Dec 6, 2024

View reviewed changes

recipes/virtual-variables/index.md Outdated Show resolved Hide resolved

recipes/virtual-variables/index.md Outdated Show resolved Hide resolved

recipes/virtual-variables/index.md Outdated Show resolved Hide resolved

recipes/virtual-variables/index.md Outdated Show resolved Hide resolved

solarrust changed the title ~~feat: Create article about virtual variables~~ Добавляет статью про Виртуальные переменные Dec 6, 2024

fix: Some fixes

c6ec4cb

Alex-Andr-19 changed the title ~~Добавляет статью про Виртуальные переменные~~ Добавляет статью про Псевдоприватные кастомные свойства Dec 6, 2024

ra1nbow1 reviewed Dec 6, 2024

View reviewed changes

recipes/virtual-variables/index.md Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

Update recipes/virtual-variables/index.md

a47bbf1

Co-authored-by: Matvey Romanov <[email protected]>

This comment was marked as resolved.

Sign in to view

fix: Change concept of technology presentation

d108002

Alex-Andr-19 requested a review from skorobaeus as a code owner December 24, 2024 06:01

This comment was marked as resolved.

Sign in to view

Добавляет мету, исправляет форматирование

f39eb72

github-actions bot added the статья Расширенный материал label Dec 25, 2024

Добавляет папку автора

6e6fd67

This comment was marked as resolved.

Sign in to view

Alex-Andr-19 and others added 3 commits January 9, 2025 09:14

Update recipes/pseudo-private-custom-property/index.md

6d9fec9

Co-authored-by: Alena Batitskaia <[email protected]>

Update recipes/pseudo-private-custom-property/index.md

12ecbe8

Co-authored-by: Alena Batitskaia <[email protected]>

feat: Change type of article

3a3a91d

github-actions bot added the css Контент по CSS label Jan 9, 2025

fix: Content fix

be7d585

TatianaFokina removed request for baileys-li and TatianaFokina January 22, 2025 16:31

Alex-Andr-19 and others added 3 commits January 23, 2025 14:17

fix: Formating misstakes

d6fb13e

fix: Some fixes

e1d23ce

Вносит небольшие редакторские правки

fa896f2

solarrust approved these changes Jan 31, 2025

View reviewed changes

Удаляет висящие пробелы

d74ffdf

skorobaeus requested changes Jan 31, 2025

View reviewed changes

Alex-Andr-19 and others added 3 commits February 3, 2025 08:41

feat: Add default styles

9a8f3a6

Привносит фирстиль в демки

50aabfb

Правит пробелы и опечатки

2981f7f

skorobaeus requested changes Feb 10, 2025

View reviewed changes

feat: Change introduction chapter

db7fa43

skorobaeus reviewed Feb 17, 2025

View reviewed changes

Alex-Andr-19 and others added 4 commits February 17, 2025 17:05

Update css/pseudo-private-custom-property/index.md

5ba4ffe

Co-authored-by: Svetlana Korobtseva <[email protected]>

Update css/pseudo-private-custom-property/index.md

bb730b1

Co-authored-by: Svetlana Korobtseva <[email protected]>

Update css/pseudo-private-custom-property/index.md

451c5a5

Co-authored-by: Svetlana Korobtseva <[email protected]>

fix: Some content fix

8760ac1

финально редачит

d69c834

skorobaeus approved these changes Feb 24, 2025

View reviewed changes

skorobaeus requested a review from baileys-li February 24, 2025 12:38

ra1nbow1 requested changes Feb 25, 2025

View reviewed changes

Alex-Andr-19 and others added 2 commits February 25, 2025 09:50

Update css/pseudo-private-custom-property/index.md

6ff4c2b

Co-authored-by: Matvey Romanov <[email protected]>

Update css/pseudo-private-custom-property/index.md

36c9500

Co-authored-by: Matvey Romanov <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Добавляет статью про Псевдоприватные кастомные свойства #5577

Добавляет статью про Псевдоприватные кастомные свойства #5577

Alex-Andr-19 commented Dec 6, 2024 •

edited by solarrust

Loading

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

Alex-Andr-19 commented Dec 10, 2024

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

solarrust left a comment

skorobaeus left a comment

skorobaeus left a comment

Alex-Andr-19 commented Feb 11, 2025 •

edited

Loading

Alex-Andr-19 commented Feb 13, 2025 •

edited

Loading

Alex-Andr-19 commented Feb 17, 2025

skorobaeus left a comment

Alex-Andr-19 commented Feb 21, 2025

skorobaeus left a comment

Alex-Andr-19 commented Feb 25, 2025

ra1nbow1 left a comment

ra1nbow1 Feb 25, 2025

Alex-Andr-19 Feb 25, 2025

github-actions bot commented Feb 25, 2025

Добавляет статью про Псевдоприватные кастомные свойства #5577

Are you sure you want to change the base?

Добавляет статью про Псевдоприватные кастомные свойства #5577

Conversation

Alex-Andr-19 commented Dec 6, 2024 • edited by solarrust Loading

Описание

Чек-лист

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

Alex-Andr-19 commented Dec 10, 2024

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

solarrust left a comment

Choose a reason for hiding this comment

skorobaeus left a comment

Choose a reason for hiding this comment

skorobaeus left a comment

Choose a reason for hiding this comment

Alex-Andr-19 commented Feb 11, 2025 • edited Loading

Alex-Andr-19 commented Feb 13, 2025 • edited Loading

Alex-Andr-19 commented Feb 17, 2025

skorobaeus left a comment

Choose a reason for hiding this comment

Alex-Andr-19 commented Feb 21, 2025

skorobaeus left a comment

Choose a reason for hiding this comment

Alex-Andr-19 commented Feb 25, 2025

ra1nbow1 left a comment

Choose a reason for hiding this comment

ra1nbow1 Feb 25, 2025

Choose a reason for hiding this comment

Alex-Andr-19 Feb 25, 2025

Choose a reason for hiding this comment

github-actions bot commented Feb 25, 2025

Alex-Andr-19 commented Dec 6, 2024 •

edited by solarrust

Loading

Alex-Andr-19 commented Feb 11, 2025 •

edited

Loading

Alex-Andr-19 commented Feb 13, 2025 •

edited

Loading