Какие приемы для именования переменных в css препроцессорах используете Вы?

Доброе утро!
Давно задавался вопросом, как правильно или как удобнее именовать переменные в препроцессорах css?
Пример для которого нужно именовать переменные:
.card
  display block
  margin 0 auto
  padding 1px 4px
  line-height 14px

Спасибо!
  • Вопрос задан
  • 458 просмотров
Решения вопроса 1
sim3x
@sim3x
Типа bem на sass
// _variables.sass
$padding-vert: 1px
$padding-hor: 4px

$some-type__line-height: 14px

$card-super-reusable__display: block

// _common.sass
%card-super-reusable
  display: $card-super-reusable__display
  margin-left: auto
  margin-right: auto
  padding: $padding-vert $padding-hor
  line-height: $some-type__line-height

// main-style.sass
.card
  @extends %card-super-reusable


mathayward.com/modular-css-with-sass-and-bem
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Не использую БЭМ и мощный препроцессор, почти всегда хватает LESS, поэтому супер-архитектуры предложить не могу, но есть вариант, который не доставляет геморроя лично мне.

Для вашего кода, если значения для класса уникальны, я бы их вбил в тот же файл с аналогичными свойствам названиями. Если эти значения используются где-то еще, то вынес бы их в обособленный файл с переменными, но добавил бы префикс, который бы указывал на кусок дизайна, в котором они используются (типа card_padding-top, card-sidebar_padding-top, etc). Этих обособленных файлов может быть много, это может быть как тотальный файл для всего проекта (и, допустим, там отступы от хидера, от сайдбара или что-то в таком духе), так это может быть файл настроек для конкретного модуля, страницы, части, унифицированного элемента и логика такая же. Т.к. не использую БЭМ, приходится постоянно следить за иерархией, но если следить, то получается неплохо.

Кроме того, наверное, имеет место сказать: я вынес все шрифты в отдельные миксины вместе с line-height и все встречающиеся цвета в переменные, позволяет менять цветовую гамму, например, на Новый Год правкой в один файл.

В итоге то, что должно быть действительно reusable, как правило, обособляется, имеет свою директорию, свой файл с переменными, где по префиксам понятно, куда оно относится, и инклудится, а то, что уникально, просто имеет конфигурируемый кусок, как правило, в начале файла. И имеется супер-глобальные мега-reusable пременные/миксины, в принципе тоже можно рассматривать как модуль.
Ответ написан
Ваш ответ на вопрос

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

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