Что стоит заносить в css переменные?

Question

[historydev]

Добрый вечер. Прошу совета чтобы не учти в крайности и не пихать буквально каждый пиксель, сейчас я заношу только цвета: границы, фон, цвет текста и т.п. Скажите пожалуйста правильная ли у меня точка зрения или требуется что-то ещё?

Comments

[alexalexes]

Смотрите концепцию метаописаний css - Sass. Она целиком и полностью это эксплуатирует.

Answer 1

[Евгений]

Всё зависит от частоты встречающихся значений чего-либо, можно туда же значения медиазапросов положить, размеры шрифтов, но не стоит упарываться слишком сильно)

Comments

[historydev]

Принял, благодарю

Answer 2

[Pavel Shvedov]

имена шрифтов можно еще

Comments

[historydev]

А размер шрифта, жир и т.д. не стоит, как думаете? С одной стороны хочется иметь весь контроль над визуалкой в одном файле, с другой не хочется сотен переменных.

[Алишер Айдархан]

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

.titleText {
    font-size: 24px;
    font-weight: 700;
    color: #4A4A4A
}
.subText {
    font-size: 12px;
    font-weight: 300;
    color: #EDEDED
}

[historydev]

Алишер Айдархан, оо, это логично, я что-то не подумал об этом ахаха, спасибо большое)

[Алишер Айдархан]

Владимир, А если хочешь придерживаться одного стиля цветов, используй CSS переменные чтобы каждый раз не вспоминать HEX код цвета

[historydev]

Алишер Айдархан, добро, спасибо

Answer 3

[WapSter]

Если дизайнер просто офигенный и положил с макетом style guide, то можно буквально все из него вносить в переменные и миксинить. А так на свое усмотрение.

Comments

[historydev]

Я не верстаю макеты, я по прототипам, сейчас я на все фронты, придумываю дизайн, прототипирую на реакте, правлю, получаю релиз, пишу бэк, подключаю к фронту, запускаю проект. Думаю на sass перескочить тоже, чтобы ускорить процесс, но пока на чистом css клепаю. Спасибо

Answer 4

[Алишер Айдархан]

Я в основном туда пишу:
1) HEX Цвета
2) Статичные padding и margin
3) Шрифт

Answer 5

[NiyazNA]

Пути до картинок/шрифтов