search

hoka-hoka / ML.test

0 stars 0 forks source link

CSS #14

Open iatsdotfatr opened 3 years ago

iatsdotfatr commented 3 years ago

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

  2. Зачем дублировать значение одной переменной в другой, если она будет использована только один раз? overvars

hoka-hoka commented 3 years ago

Исправил. Если ты спрашиваешь про дублирование цветов в var.scss, то это я делаю только для удобства. То есть существуют глобальные и локальные цвета.

iatsdotfatr commented 3 years ago

Непонятно, что в этом удобного. Ты же не ui-библиотеку пишешь).

hoka-hoka commented 3 years ago

Здесь под локальными я имею ввиду те переменные, которые будут использоваться только внутри var.scss, а глобальные хоть где. Само разделение на локальные и глобальные переменные условно и никак не связанно с областью видимости переменных scss. Например, если делать так

$palette-paragraph: rgba(#1f2041, 0.75); // переменная для параграфа c непонятно каким цветом

то, взглянув на переменную $palette-paragraph, не понятно какой у неё цвет, а предварительный просмотр цвета в vscode не работает, если в цветовую sass-функцию передаётся переменная.

// local
$x-dark: #1f2041;
$x-dark-75: rgba($x-dark, 0.75);

// global
$palette-paragraph: $x-dark-75; // переменная для параграфа с темным цветом

Основное достоинство такого объявления в том, что посмотрев на любую глобальную переменную, нам сразу становится видно для чего она используется (название) и какой у неё цвет.

iatsdotfatr commented 3 years ago

"Локальная" переменная дублируется в десятке "глобальных", и непонятно зачем тогда вообще нужны переменные, если нет никакого переиспользования, с тем же успехом можно каждый раз просто писать нужный цвет, который будет сразу видно в редакторе.

hoka-hoka commented 3 years ago

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

  1. Имена sass-переменным назначаются в зависимости от места их использования ($paragraph, $shadow, $link и т. д.).
  2. Название sass-переменной зависит от значения её цвета ($purple, $red, $green и т. д.).
  3. Связанна с названием BEM-компонента, в котором используется переменная.

Можешь, пожалуйста, привести один пример названия переменной с каким-нибудь разделителем, чтобы мне сразу стало понятно.

iatsdotfatr commented 3 years ago

Вряд ли здесь можно дать какой-то однозначный ответ. Если говорить про цвета, название, например, может описывать как сам цвет, так и случаи, когда он используется (например, success для зеленого, danger, или error для красного и т.п.). Основная цель не в названии, а в том, что если на проекте вдруг надо поменять какой-то стандартный цвет, он меняется один раз, в том месте, где присвоен переменной, после чего, смена происходит везде, где это переменная использовалась. Присваивать значение этой переменной другой переменной большого смысла не имеет, потому что по названию css-свойства и так ясно, в каком качестве она применяется.

hoka-hoka commented 3 years ago

Исправил