Магические числа?

Question

[liltrill]

Прочитал я статью вот выдержка в фотографии:



И я увлекся, для всего я начала создавать переменные:





В итоге я понимаю что делаю что то не так. Профита от такого нет, есть засорение файла с переменными.
Я понимаю что переменную нужно использовать в таких случаях:

В проекте есть 3 основных цвета, создаем переменные и используем везде где нужно, и если дизайнер поменяет цвет на пару оттенков то мы в одном месте поменяем цвет и все, во всех компонентах поменяется.

Исходя из той статьи(из примера с кнопкой) я понял что все значения магические, и для всего нужны переменные, это ведь не так?

P.S: И там в примере кнопка, какой профит с того что все в переменные вынесено. Какая разница открыть файл с переменными или файл с кнопкой и там отредачить. Я запутался вообщем.

Answer 1

[Алекс Глебов]

Первая причина использовать переменные - если значение нужно в 2х местах и более. Чтоб не копипастить.
Одинаковые transition, размеры заголовков и тд.

Втарая - удобство настройки компонентов. Например гамбургер. Он есть в каждом проекте, но меняется цвет, размеры и тд. Это удобно вынести в переменные и не лезти править внутри.

Третья - базовое значение. Например для отступов.

$indent: 8px;
.elem {
  padding: $indent*2 $indent*3;
}

Comments

[Rustam Bainazarov]

Только gutter, guetter другое обозначает :))

Answer 2

[Rustam Bainazarov]

Переменных должно быть столько, сколько требуется для решения задачи наиболее оптимальным путём.

Если проще, быстрее, прозрачнее и логичнее сделать без переменной — делайте без переменной. Если вы понимаете, что переменная вам всё же нужна — делайте переменную.

Во многих крупных проектах многое на переменных построенно, ибо так можно многое автоматизировать. Например, в том же Bootrstrap почти всё построенно на переменных — это позволяет автоматизировать процесс кастомной сборки.

Например, делал недавно небольшой компонент кнопки — вышло порядка 35 переменных (+6 глобальных), и все они служат своей цели, лишних нет. А сегодня я делал достаточно большой компонент баннеров — там всего 6 переменных вышло (+2 глобальных). И больше не было нужно для поставленной задачи.

Словом, делайте по ситуации и технической потребности.

Comments

[liltrill]

Спасибо =)