Альфа, Бета, Гамма Соглашение об именах

Несколько месяцев назад я начал использовать соглашение об именах Alpha, Beta, Gamma. Это началось как временная вещь, но в конце концов она прижилась, и теперь я использую ее все время.

Альфа, Бета, Гамма

Я использую ЧТО Ж на ежедневной основе. М означает модификаторы. Вообще говоря, модификатор представляет собой разновидность элемента.

Однажды у меня возникла большая проблема программирования: как назвать вещь, в моем случае модификатор. Ничего конструктивного придумать не смог, поэтому просто написал alpha. Затем я создал новую модификацию элемента и назвал новый модификатор beta.

Когда я вернулся к этому конкретному коду, чтобы обновить имена модификаторов, я понял, что мне это нравится. Имена чистые и понятные, и я знал, какой класс мне нужно применить, чтобы изменить исходный элемент. Родилось новое соглашение об именах.

Именование переменных

Через некоторое время я начал использовать то же самое с переменными Sass. Вот как выглядят переменные цвета для моего сайта:

$color-alpha: #12e09f;
$color-beta: #e01258;
$color-gamma: #f5f5f5;
$color-psi: #1f1f1f;
$color-omega: #fff;

Почему это работает

Что хорошего в использовании соглашения об именах Alpha, Beta, Gamma, так это то, что оно отделяет контекст от элемента. Также, греческий алфавит широко используется, поэтому вероятность того, что вы уже знаете некоторые символы, довольно высока.

Допустим, у нас есть list компонент с модификаторами list--red, list--green, а также list--blue для списка с красными, зелеными и синими элементами соответственно. В какой-то момент наш дизайнер решил изменить цвет бренда с красного на розовый. Теперь нам нужно обновить красный цвет на розовый, что означает имя нашего класса модификатора. list--red больше не будет иметь смысла. Нам нужно обновить имя класса на list-pink. Эта ситуация является классической проблемой в мире CSS.

Если мы используем соглашение Alpha, Beta, Gamma, у нас будут эти три класса:

  • list--alpha,
  • list--beta, а также
  • list--gamma.

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

Не злоупотребляйте этим

Здесь есть потенциальные накладные расходы мозга, потому что вы должны помнить, какая буква обозначает какую версию элемента. Постарайтесь уменьшить нагрузку на мозг, документируя свои переменные и модификаторы и не используя слишком много вариаций для одного компонента.

Использовать psi а также omega называть разные или совершенно разные переменные или модификаторы.

Вот вам совет: используйте psi а также omega буквы (последние две буквы алфавита) для обозначения разных или совершенно разных переменных или модификаторов. Например, я использую color-psi для цвета текста и color-omega для белого цвета. Это противоположности color-alpha, color-beta, а также color-gamma который в моем случае служит цветом темы/бренда.

Вывод

Соглашение об именах Alpha, Beta, Gamma работает для меня, и я использую его во всех новых проектах. Я совершенно уверен, что это не я придумал, я просто хотел поделиться с вами этим подходом и узнать, что вы о нем думаете.

Вам нравится такой подход? У вас есть другое соглашение об именах, которым вы хотите поделиться с сообществом? Я хотел бы услышать больше об этом. 💬

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *