Стандарты названий css классов и id
Для форматирования элементов на web-странице, web-мастера создают имена классов и id которыми идентифицируют контейнеры. Свойства css селекторов должны в точности соответствовать свойствам XHTML тегов, для которых они предназначены, а вот названия классов и идентификаторов зависят только от web-мастера, создающего эти классы. Однако при выборе названия классов и идентификаторов web-мастера не должны полностью полагаться на свою изобретательность. Хоть и не существует четких правил для имен классов и id, все же существует ряд рекомендаций, направленных на достижение структурированности названий для уменьшения путаницы.
В этой статье мы рассмотрим эти рекомендации, а также увидим на какие виды делятся названия в css.
Обозначающие расположение.
При создании Web-страниц необходимо определять названия контейнеров на странице указывающие на расположение контейнера. Вот очень хорошие название классов:
- top-panel
- horizontal-nav
- left-side
- center-column
- right-col
Все эти названия валидны для использования в CSS и XHTML. Они являются простыми и четко описывают расположение контейнера и выполняют свою миссию - идентифицируют элемент страницы.
Главная проблема таких названий состоит в том, что они ссылаются на позицию размещения элемента на странице и могут быть несоответствующими и запутывающими если элемент разместить в другом месте страницы.
Структурные (описывающие действия).
Структурные названия классов создаются для того, чтоб описать действие для которого предназначен контейнер.
- branding
- main-nav
- subnav
- main-content
- sidebar
Эти названия являются не менее понятными, чем обозначающие расположение. Но в отличии от обозначающих расположение, структурные названия описывают действие класса, а не местоположение. Структурное обозначение названий классов устраняет беспорядок, если изменить положение контейнера, так как они не связаны с местоположением на странице.
Общие названия.
Проанализировав названия CSS большого количества сайтов, мы выбрали названия которые очень часто встречались в разных сайтах. Вот самые общие названия классов:
- header
- content
- nav
- sidebar
Можно с уверенностью сказать, что эти названия стали неким "стандартом названий классов", так как приминение этих названий можно встретить практически на всех современных сайтах. Очень сложно переоценить важность общих названий классов, так как использование стандартизированных названий облегчает поиск и обновление общих элементов на разных сайтах, что позволяет создать устоявшуюся структуру для создания сайтов.
Рекомендуем почитать
