@QuDDoSS
Девелопер

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

Дорогие знатоки, вопрос:
Хорошо ли менять значение стилей через 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 ))
        }
    }
    
}
  • Вопрос задан
  • 134 просмотра
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Тут вопрос не в оптимизации, а в удобстве. Если вы вместо переменной захардкодите значение в стили, то при необходимости изменить его вам придётся перелопатить все CSS-файлы и все стили в них в поисках нужных значений.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы