Идентификаторы и имена классов

Смысловые элементы предоставляют великолепный материал для построения фундамента страницы, однако список доступных элементов не является исчерпывающим. Язык (X)HTML был создан как простое средство разметки документов, а не как язык интерфейса. Из-за этого в синтаксисе (X)HTML отсутствуют элементы, специально предназначенные, например, для области содержимого или навигационных панелей.

Средствами XML вы можете создать для этого собственные элементы, однако в настоящее время такой подход по многим причинам непрактичен.

Существует другой способ расширения списка смысловых элементов. Вы можете использовать существующий элемент, придав ему дополнительный смысл с помощью идентификатора или имени класса. Таким способом вы добавите в документ дополнительную структуру и установите в коде “зацепки” для ваших стилей. Например, в простой список гиперссылок с помощью атрибута id можно добавить имя mainNav, которое будет означать, что список используется в качестве главной панели навигации.

Значение ID используется для идентификации отдельного элемента страницы. Оно должно быть уникальным. В приведенном выше примере оно идентифицирует элемент ul как средство навигации по сайту. Значения ID полезны для идентификации устойчивых структурных элементов, таких, как область содержимого или средства навигации. Кроме того, значение ID может быть полезным для идентификации отдельного, чем-либо выделяющегося элемента, например гиперссылки или элемента формы.

Чтобы избежать путаницы, в пределах сайта идентификаторы следует применять к концептуально похожим элементам. Если форма контактов и детализация контактных данных находятся на разных страницах, то технически им можно присвоить одно и то же имя, например contact. Однако делать так не следует, поскольку впоследствии вы будете присваивать элементам стили на основе их назначения. Намного проще применить разные имена, например contactForm и contactDetails.

Один идентификатор можно присвоить только одному элементу на странице, а имя класса — любому количеству элементов. Классы весьма полезны для идентификации типов содержимого или для обозначения аналогичных элементов. Предположим, на странице, посвященной новостям, есть даты каждой статьи. Тогда вместо присвоения датам разных идентификаторов можно присвоить всем элементам дат одно и то же имя класса. Это будет класс дат.

Присваивая имена идентификаторам и классам, важно выбирать их таким образом, чтобы они сообщали о назначении элементов и как можно меньше зависели от презентационных аспектов страницы. Предположим, вы присвоили навигационной панели, расположенной справа, имя id=»rightHandNav». Однако впоследствии вы можете переместить панель влево, в результате чего таблица CSS и документ (X)HTML окажутся рассогласованными.

Чтобы избежать этого, лучше с самого начала присвоить элементу панели имя subNav или secondaryNav. Эти имена объясняют, что делает элемент, а не как он представлен или расположен. То же справедливо и для имен классов. Предположим, нужно, чтобы все сообщения об ошибках (error) выводились красным цветом (red). Тогда классу сообщений об ошибках лучше присвоить имя error, а не red, поскольку впоследствии может понадобиться изменить цвет.

При выборе идентификатора или класса обращайте внимание на чувствительность имени к регистру в таблицах CSS. Однако чувствительность к регистру зависит не только от таблиц CSS, но и от языка разметки. При использовании XHTML имена идентификаторов и классов чувствительны к регистру, а при использовании HTML — нет. Чтобы ваш код был стабильным, придерживайтесь одних и тех же соглашений об именовании

при работе с любым языком разметки, т.е. всегда предполагайте, что имена чувствительны к регистру. Мы рекомендуем всегда применять соглашение “Camel”, т.е. использовать символы верхнего регистра только для первых букв второго и последующих слов, входящих в имя.

Гибкость классов предоставляет дизайнеру богатые возможности, в то же время классы довольно часто применяют неправильно. Начинающие дизайнеры CSS добавляют классы почти ко всем элементам, пытаясь получить полный контроль над их стилями. У ранних редакторов WYSIWYG тоже была “манера” присваивать классы при каждом применении стиля.

Глядя на код, созданный этими редакторами, и обучаясь на примерах такого кода, многие дизайнеры переняли плохую привычку добавлять слишком много классов. Иногда такую манеру работы называют “классицизмом”. В сущности, классицизм так же плох, как и верстка на основе таблиц HTML, поскольку в обоих случаях документ содержит много кода, не согласованного с назначением компонентов страницы. Рассмотрим пример кода.

Caira Zeldman.com обновлен

<р class="newsText">
Джеффри обновил несколько страниц после…

<р class="newsText1">
Дополнительная информация

В этом примере каждый элемент идентифицирован как часть сайта, посвященного новостям (news), с помощью класса, имя которого содержит префикс news. Так сделано для того, чтобы заголовкам и фрагментам текста, которые посвящены новостям, было легко присваивать стили, отличные от стилей других компонентов страницы. Однако для каждого элемента все эти дополнительные классы не нужны. Вместо них можно весь блок новостей идентифицировать с помощью дескриптора div и класса news. После этого присваивать стили заголовкам и тексту новостей можно будет с помощью каскадирования, как в приведенном ниже примере.

Сайт Zeldman.com обновлен
<р>Джеффри обновил несколько страниц после…
<р><а href="news.рhр">Дополнительная информация

Устранение дополнительных классов помогает упростить код и уменьшить размеры страницы. Использование селекторов CSS и назначение стилей рассматриваются далее в главе. Следует отметить, что полагаться только на имена классов не обязательно.

Обычно класс применяют к элементу, только если использовать идентификатор в данной ситуации по какой-либо причине неудобно. Мы рекомендуем не злоупотреблять именами классов. Если документ (X)HTML содержит слишком много классов, скорее всего, это указывает на то, что он плохо структурирован.

Источник: Энди Бадд, Камерон Молл, Саймон Коллизон. Мастерская CSS: профессиональное применение Web-стандартов.

Comments are closed, but trackbacks and pingbacks are open.