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

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

Для того, чтобы погрузиться в «программирование» на Less, как и в любом другом языке, нужно правильно именовать переменные. Я не шучу, это очень важная и животрепещущая тема для всех новичков и даже тех, кто уже может себя по праву считать заслуженным программистом.

Имя переменной

Когда переменная имеет имя a или razmer-wrifta, а правила наименования меняются каждые десять строк, то уже сразу можно говорить о разработчике плохо. Просто примите как должное, что название переменной должно быть на английском языке, вне зависимости от того, на каком языке написаны комментарии к коду. Будь вы хоть трижды патриот своей страны или вы не знаете английский.

Хорошим примером могут послужить следующие переменные:

@body-background: #f5f5f5;
@body-font-size: 14px;
@header-background: #fff;
@btn-border-radius: 4px;
@navbar-item-line-height: 20px;

Разделение слов в имени

Используйте дефис, нижнее подчёркивание (under_score) или верблюжью нотацию (camelCase) для разделения слов в имени переменных.

Хорошим примером могут послужить следующие переменные:

// Дефис
@grid-breakpoint-xsmall: 540px;
@navbar-item-color: #777;
@pagination-border-color: #ddd;

// Нижнее подчёркивание (under_score)
@hamburger_border_radius: @border_radius;
@line_height_computed: 24px;
@font_awesome_path: "../vendor/font-awesome/font";

// Верблюжья нотация (camelCase)
@labelFontSize: 0.8em;
@commentBackground: #FFFFFF;
@authorHoverColor: @primaryColorHover;

Содержательное имя

Старайтесь давать переменным такие имена, которые сочетают в себе простоту, содержательность и логичность.

Хорошим примером могут послужить следующие переменные:

@brand-color: #ffff66;
@btn-default-background: #fcfcfc;
@btn-default-hover-background: #ccc;
@article-item-title-hover-color: @brand-color;

Последовательность имени

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

Рассмотрим последовательность имени переменных на основе разметки:

<article class="article-card">
  <header class="head">
    <h1 class="title">
      <a href="#ignoreClick">Заголовок</a>
    </h1>
  </header>
  <div class="content">
    <p>Текст карточки</p>
  </div>
  <footer class="footer">
    <ul class="tag-widget">
      <li><a href="#tag">Проекты</a></li>
      <li><a href="#tag">Less</a></li>
    </ul>
  </footer>
</article>

Хорошим примером могут послужить следующие переменные:

@article-card-background: #fff;
@article-card-border-radius: 4px;

// Цвет и размер шрифта ссылки в заголовке
@article-card-title-color: #777;
@article-card-title-hover-color: #333;
@article-card-title-font-size: 2.4rem;

// Размер шрифта блока контента
@article-card-content: 1.6rem;

// Виджет тегов
// Переиспользуемое представление тегов
// В различных частях макета
@tag-item-color: #777;
@tag-item-hover-color: #333;

Единый стиль

Используйте единый стиль наименования переменных. Например, если вы один раз использовали дефис для разделения слов в имени переменных, то используйте его во всём проекте.