Home

Есть несколько моментов которые могут сделать работу с версткой вообще идеальной.

Главная цель - создавать компоненты в виде сверстанного html-элемента и соответвующими ему стилями в виде одного класса, который целиком описан в одном css-файле.

Делать так, чтобы верстку можно было переносить не целиком, а покомпонентно - выдернули один блок из html, перенесли его в проект, скопировали less файл который его описывает и все.

Семантика

Цели:

• Улучшение читабильности кода
• Уменьшение количества дом-элементов, что в приводит к увеличению производительности в браузере.

Считаю что количество dom-элементом в проекте можно уменьшить в 3 раза. Это увелисит скорость рендеринга на 30-50%

Один компонент - один элемент.

Сементическа верстка, минимум стилевых элементов. Элемент должен обозначать то, что в нем находится, а не то, как это отображать.

Стараться НЕ использовать html-элементя для стилизации. Все делать стилями. Это должно привести к уменьшению количества вложенных элементов. Пример -

Вместо:

<span class="button button--aaa button--small">
  <span className="button__inner">
    <span className="button__text ">{text}</span>
  </span>
</span>

Делать так:

<button class="followButton">Подписаться</button>

Один компонент - одил класс.

Не применять надстройку стилей накручиванием классов.

Класс должен описывать конкретный элемент. То, как этот элемент отображается должно лежать в стилях, а не настраиваться добавлениями классов.

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

Вместо:

class="button button--aaa button--small"

так:

class="follow-button"

А стили button, button-small подключить в follow-button в CSS миксинами

Еще раз тоже самое другими словами. Класс button-small не может существовать отдельно. Это миксин, по этому и использовать его надо как миксин в less, а не в html.

Стили

• Очень трудно искать классы в less из-за того что они формируются динамически.
• Один компонент - один less-класс.
• НЕ изменять стили компонента через установку класса в его родителе (например через установку класса в body)
• Не использовать загашенные элементы для смены контента.