Это хорошая практика или понты?

Question

[Можно просто Евгений]

Дорогие знатоки, вопрос:
Хорошо ли менять значение стилей через css переменную, даёт ли это какую то оптимизацию (скорость перерисовки) или нет ?

Простой пример:

// Global.css
:root {
    --color-primary: 157, 29, 90;
    --color-secondary: 241, 241, 241;
    --color-success: 0, 201, 8;
    --color-info: 74, 148, 236;

    --btn-size: 3.5rem;
    --btn-size-xs: 2rem;
    --btn-size-sm: 2.5rem;
    --btn-size-lg: 4rem;

    --btn-font-size: 0.75rem;
    --btn-font-size-xs: 0.75rem;
    --btn-font-size-sm: 0.75rem;
    --btn-font-size-lg: 0.875rem;
}

// Button.css
.btn {
    --bh: var(--btn-size);
    --bfz: var(--btn-font-size);
    --bbg: var(--color-primary);
    --bbg-from: var(--color-primary);
    --bbg-to: var(--color-primary-darken);

    height: var(--bh);
    font-size: var(--bfz);
    background-color: rgba(var(--bbg), 1);

    &--lg {
        --bh: var(--btn-size-lg);
        --bfz: var(--btn-font-size-lg)
    }
    
    &--gradient {
        background-image: linear-gradient(to top right, rgba(var(--bbg-from), 1), rgba(var(--bbg-to),1 ))
    }
    
    &--success {
        --bbg: var(--color-success);
        --bbg-from: var(--color-success);
        --bbg-to: var(--color-success-darken)
    }

   &--danger{
        --bbg: var(--color-danger);
        --bbg-from: var(--color-danger);
        --bbg-to: var(--color-danger-darken)
    }


   // ИЛИ
    &--success {
        background-color: rgba(var(--color-success), 1);
        &.btn--gradient {
            background-image: linear-gradient(to top right, rgba(var(--color-success), 1), rgba(var(--color-success-darken),1 ))
        }
    }
    
}

Comments

[WapSter]

С цветами все норм, с размерами туфта полнейшая. Ведь сразу можно прописать значения для переменной на определенном разрешении

[Ankhena]

Так, как вы их используете, удобство ограничено.
Хотя некоторые плюсы есть в том, что все переменные в одном месте.
Но как только макет станет чуть более затейливым, все плюсы потеряются.

Answer 1

[Rsa97]

Тут вопрос не в оптимизации, а в удобстве. Если вы вместо переменной захардкодите значение в стили, то при необходимости изменить его вам придётся перелопатить все CSS-файлы и все стили в них в поисках нужных значений.

Comments

[Можно просто Евгений]

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

[Можно просто Евгений]

Переписать какую то компоненту в другой компоненте будет ограниченно