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

LESS:

• Есть набор переменных и условий встроенных в ядро. Следует их использовать по назначению. Примеры:
  1. Текст "в наличии" который нужно оформить зелёненьким цветов — это не #00ff00, а @in_stock
  2. Цвет текста мы не задаём через HEX, а так же используем переменные зашитые в цветосхемы. В данном случае нам нужна переменная @font. Если же где-то текст немного светлее или темнее то затемняем/высветляем через less функцию darken(*переменная с цветом*, n%) или lighten(*переменная с цветом*, n%)
  3. Если где-то нужно использовать полупрозрачный фон, например, основной кнопки, то мы не зашивает цвет в стилях, а используем less функцию fade. Пример: fade(@primary_button, n%).

  4. Закругляем углы через миксин .rounded_corners(n);. В настройках платформы есть галочка "Скруглить углы". Этот миксин учитывает эту настройку как раз.

     Мы не используем этот миксин только в случаях, если нам 100% всегда нужен круг (например, мы оформляем кастомный <input type="radio">).

  5. Стили пишем следующим образом:

     .selector {
         border: 1px;
     }

     То есть селектор и открывающая скобка на одной строке через пробел, табуляция в 4 пробела (настроить именно пробелы), закрывающая скобка на отдельной строке.

  Подробнее тут: https://lesscss.org/functions/#color-operations

  Полный список доступных переменных лежит в design/themes/*используемая тема*/styles/data/file.less (в любом less файле в этой папке).

• Если нам нужно задать уникальное оформление какому-то одному блоку или секции, то задаём свой класс этому блоку через макеты. И всё оформление заворачиваем в селектор с этим классом. Например: нам нужно сделать секцию с заголовком плавающей и с фоном. Не нужно так делать если мы оформляем подобным образом все заголовки на сайте (потому что тогда нам нужно будет прокинуть этот класс на все заголовки).