Подход к верстке

Многие привыкли именовать классы блоков именем подходящим по смыслу. Например если блок отображает товар в категории вероятно мы увидим обертку div с классом product или product-item, на который навешаны стили для придания необходимого вида.

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

Для разработки будет удобнее сделать заранее набор классов задающих визуальные элементы повторяющиеся в дизайне. Например рамочка, которая в дизайне присуща карточке продукта, а так же блоку пагинации будет определена классом border-style-1 или сокращенно bs1. Обычно я имею следующие классы:

  • Классы бэкграундов — bg1, bg2 …
  • Классы шрифтов — fs1, fs2 от font-style
  • Классы рамочек — bs1, bs2 …

Так же желательно иметь набор вспомогательных классов для внешних/внутренних отступов

  • Отступы от верха — top3,top5,top10…
  • Внутренние горизонтальные и вертикальные отступы — vm3,vm5… / hm3, hm5 … от vertical-margin и horiz margin
  • Вспомогательные классы bootstrap — pull-left и тд

Глобальное позиционирование реализую с помощью бутсnрап сетки + классы pull-left и pull-right

Плюсы этого подхода:

  • Верстать быстрее и приятнее

Минусы этого подхода:

  • Иногда набор классов элемента получается очень длинным

2 Replies

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

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