Главная › Новости

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

Опубликовано: 05.09.2018

Основы CSS - #4 - Структура сайта

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

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

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

Семантические теги в HTML | HTML для самых маленьких #7

RightSideSpace LeftColumn MiddleColumn FloatRight Blue14pxArial YellowText

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

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

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

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

NavigationGlobal Header Warning Copyright Description

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

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

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