Примеры применения переменных CSS на практике

[uyrij]

Статья наверное полезная, обязательно посмотрю как только в разметке кода цвета будут улучшены ( а то полусветлые на полусветлом не разберёшь на фоне #fff). В хроме же показывает contrast ratio или вот здесь проверьте пожалуйста. https://contrast-ratio.com/

[Tuyrgokr3]

Настолько, что я даже не ожидал что в ксс можно такую красоту создать

[atomic1989]

Также есть опыт использования css переменных для темы приложения. Нет необходимости заботится о селекторах прочих сложностях)

[noodles]

Цель этой статьи — познакомить с различными вариантами практического применения, где полностью раскрываются возможности переменных CSS.

Автор оригинала какой-то дурачок, ейбогу. Только узнал про css-переменные, и уже статью пишет.

Чем это

.page-header {
    --padding-start: 2.5rem;
    --padding-block: 2rem;
    padding: var(--padding-block) 1rem var(--padding-block) var(--padding-start);
}

.page-header--compact {
    --padding-start: 1.5rem;
    --padding-block: 1rem;
}

лучше этого

.page-header {
    padding: 2rem 1rem 2rem 1.5rem;
}

.page-header--compact {
    padding: 1rem 1rem 1rem 2.5rem;
}

Аналогично, чем это

<section 
    class="newsletter" 
    style="--thumb:url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')">
</section>

лучше этого

<section 
    class="newsletter" 
    style="background-image: url('/assets/ui/decoraitve/newsletter-lg-aj1891101.svg')">
</section>

И так далее по тексту. Читаемость ухудшилась, да. А что улучшилось-то?

[mSnus]

Это всё обретает смысл, когда значение используется несколько раз, например, когда надо разом менять шрифт и высоту строки по всему сайту. Но в статье как-то акцент не на этом.