Семантика в css

5 авг. 2008 г. ·

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

Вдумчивый, семантически коректно названные классы и ID могут помочь настроить (X)HTML документ для будущих преобразований и возможного хранения данных в формате XML, который может быть настроен иначе. Не называйте объект (id или класс) так, на что он похож или где он используется.

Примеры названий классов и ID, которые не являются семантическими:

  • YellowText
  • Blue14pxArial
  • FloatRight
  • LeftColumn
  • MiddleColumn
  • RightSideSpace

Использование этих названий бессмысленно, так как, кто бы не правил стили сайта в будущем, может изменить стили описанные в этом классе, что приведетк абсурду. К примеру:
Разработчик для текста желтого цвета определил класс YellowText, а в будущем при редизайне сайта, цвет текста изменили с желтого на синий, в результате мы имеем класс YellowText с определенным синим цветом. Что само по себе является абсурдным.

Поэтому при выборе названия класса нужно руководствоваться не определенными внутри класса стилями, а назначением класса.

Примеры семантических названий классов и ID:



  • Header
  • Footer
  • NavigationLocal
  • NavigationGlobal
  • Content
  • Tools
  • Warning
  • Address
  • Instructions
  • Author
  • Copyright
  • Description
  • Summary

У этих названий существует определенный уровень абстракции. Вы можете их использовать неопределенное количество раз и при этом иметь лишь одно внешнее описание css. При этом Вам не нужно будет переписывать название класса если Вы решите изменить стиль.
Редактирование стилей, без изменения названия класса в css и (x)html документе выражает семантическую породу контейнера с содержимым не загрязняя его информацией, определенной только для одного контекста.

Одна из самых важных возможностей css - изменить стиль отображения не изменяя самого (x)html документа. Используйте функциональные названия для своих классов и ID; избегайте названий, которые описывают, стиль, а не функцианальность.

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

Основные выводы данной статьи:

  1. Классы и идентификаторы (ID) нужно использовать только тогда, когда в этом есть необходимость.
  2. Название классов и идентификаторов (ID) должны описывать функциональность, а не стиль
  3. Используйте идентификаторы (ID) в тех случаях когда нужно определить один, уникальный стиль для страницы, а класс - когда нужно класс испольвать несколько раз на странице.


Источник

Отправить комментарий

Подписка на блог

Подпишитесь в ридере или, через электронную почту:
Введите ваш E-MAIL адрес:
Поиск Google: