Верстка виджетов - основные принципы

При создании верстки, практически любой элемент макета можно представить в виде виджета — независимого элемента. Верстка виджета в идеале не должна зависеть от верстки остальной странницы. На практике добиться этого не всегда просто. Эта независимость дает — универсальность и повторное использование кода (в нашем случае HTML и CSS, а иногда и JS) — которые так ценятся в программировании, но почему то довольно редко встречаются в верстке.

Рассмотрим пример: Студия создает интернет магазины, причем не важно на каком движке Битрикс, joomla или «гордая самопись». В любом из этих случаев у магазина должно быть пространство под отображение статуса корзины пользователя (сколько товаров, на какую сумму и тд) и личный кабинет. С вероятностью 99% эти элементы от сайта к сайту будут отображать одну и туже информацию. Разница будет совсем небольшой и только в ее оформлении. Да и то, при адекватном дизайнере, оформление не будет выходить за рамки «типовых решений».

И вот мы имеем несколько областей, которые заново верстаются от макета к макету по разному. Различаясь при этом (грубо говоря) шрифтом и парой плашек. Гораздо выгодней в такой ситуации сделать для таких повторяющихся областей стандартизированную разметку в которой потом будет меняться та самая пара CSS свойств отвечающих за шрифт и плашки.

Как же лучше делать такую верстку.

Для больших проектов есть БЭМ от yandex — мощная и классная вещь, сожалению, не всегда применимая к простым проектам. А для небольших проектов есть несколько простых правил:

• В первую очередь продумывается HTML/CSS структура. Как элемент будет выглядеть в обычном состоянии, как будет меняться при взаимодействии с посетителем.
• Верстка должна быть семантической. Например, в именовании классов должно содержаться название состояния, а не стиль оформления. При семантической верстке класс должен отвечать на вопросы: «что это?», «в каком состоянии?», и т.д.
• Состояние элемента следует добавлять на тот элемент, к которому оно относиться по смыслу.
• Иcпользование префиксов в именовании классов. Чтобы избежать возможных проблем, все классы внутри виджета следует начинать с его имени.