Семантический Css

Семантика в css

Семантика в 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) в тех случаях когда нужно определить один, уникальный стиль для страницы, а класс - когда нужно класс испольвать несколько раз на странице.