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

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

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

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

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

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

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