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

Это определение предполагает качественное, то есть корректное использование названий классов и только в тех случаях, когда он требуется. Использовать CSS желательно тогда, когда нет подходящего тега HTML.

Семантически настроенный CSS помогут корректно преобразовать документ для дальнейших изменений и последующего хранения данных по формату XML. Не нужно называть ваш объект (класс) так, на что он полагается или на что похож.

Вот несколько примеров названий классов, которые нельзя назвать семантическими:

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

Использовать такие названия не имеет смысла, так как специалист, который будет в дальнейшем изменять стили CSS, может привести содержимое и название к несовместимости.

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

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

Вот примеры подходящих названий классов:

• NavigationGlobal
• Header
• Warning
• Copyright
• Description

Все названия можно использовать неограниченное количество раз.

Одной из главных возможностей CSS является изменение стиля отображения, не меняя (x)html файла.

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