Многие привыкли именовать классы блоков именем подходящим по смыслу. Например если блок отображает товар в категории вероятно мы увидим обертку 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
Плюсы этого подхода:
- Верстать быстрее и приятнее
Минусы этого подхода:
- Иногда набор классов элемента получается очень длинным
все это конечно здорово, но следующему верстальщику будет сложней вникнуть в суть стилей
тогда можно без сокращений делать. border-style и тд