Сумрачный блог Кирилла Панфилова

Семантическая вёрстка

Часто термин «семантическая вёрстка» используют не совсем корректно, в плане просто отделения формы от содержимого.

Допустим, есть страница, свёрстанная на блоках, а всё разукрашивание ведётся средствами CSS. Логика и оформление в этом случае разделены, но при одном условии: если идентификация блоков ведётся не по внешним признакам, а действительно по семантике.

Распространённая ошибка многих веб-верстальщиков — использовать идентификаторы и классы по их верстальным возможностям. Например, специальный блок для завершения группы плавающих элементов. Span, выделяемый красным цветом. Одинаковый класс и для эпиграфа, и для авторской подписи к материалу.

Чем это плохо: если возникнет необходимость изменить стилевое описание элементов, используемых на одной странице, то есть опасность, что «поедет» вёрстка или проявятся нежелательные изменения на страницах другого типа, где применены те же классы. (При редизайне установили для блока ширину в 415px вместо 512, но не проверили, что на одной из страниц из-за этого съёжились поля для ввода и лейблы, заключённые в блок с тем же стилевым идентификатором).


Рецепты правильной вёрстки:

1. Использовать только смысловые имена. Если блок для формы регистрации и блок для отправки писем похожи по каким-то признакам или на данном этапе вообще обладают одинаковыми стилями, лучше сделать два идентичных описания, но для разных ID или классов. В будущем вы обезопасите себя от багов в вёрстке, случившихся по недосмотру.

2. Если стилей получается слишком много, можно использовать несколько стилевых файлов: один основной, для классов и идентификаторов, встречающихся на большинстве страниц, остальные по разделам. Соответственно и подгружать нужные в соответствующих разделах (это легко поручить серверу).

3. Целесообразно использовать префиксы в именах классов и идентификаторов, например: regform_main, regform_input, regform_label, regform_announcement и так далее (помимо всего прочего, это создаст удобства при динамическом изменении стилей средствами JavaScript или серверного языка).

В стилевых файлах очень удобно снабжать комментариями разделы, например:


/* Main */
a { ... }
p { ... }

/* Forms */
input { ... }
input.abcd { ... }

/* IDs */
#abc { ... }
#pretend { ... }

Старайтесь использовать в стилевых файлах только латиницу во избежание проблем некоторых браузеров с кодировкой: если страница на UTF, а стилевой файл на Windows-1251 с использованием кириллических символов, то Internet Explorer (до 6 версии точно) просто проигнорирует эту стилевую таблицу.

И, конечно, нужно использовать последовательный стиль вёрстки и написания стилевых файлов: отступы, особенности имён, стилевые правила в столбик или в строчку...

4. Можно в качестве вспомогательных мер использовать возможности наследования, или вложенности, как некий аналог ООП.

Если я напишу:

div#register input {...},

то я буду точно уверен, что таким стилевым описанием я разукрашу только поля ввода, заключённые в блок с id="register", а не какие-либо другие.

А для всех полей ввода можно описывать общие правила, только если они точно и всегда будут соблюдаться на всех страницах сайта и соответствуют общему стилю.

5. И не нужно забывать про таблицы. Их некто не отменял, если они также используются семантически, то есть для табличных данных (статистика, результаты, цены и т. п.)

Яндекс.Метрика