Семантичная верстка HTML

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

1. Используйте Bootstrap

Использование CSS-фреймоврка изначально избавляет Вас от необходимости придумывать 100500 названий для контейнеров, блоков и элементов общего назначения. А использование конкретно Bootstrap, на мой взгляд, дает целый ряд преимущест в долгосрочной перспетиве. И помните, что использовать Bootstrap и сверстать ещё один однообразный сайт на Bootstrap это, как говорят в Одессе, две большие разницы. Вы можете и даже обязаны кастомизировать стили фрейморка под свой конкретный проект.

 

2. Продумывайте соотношение блоков HTML и CSS

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

/* Главная страница */

/* Страница товара */

/* Страница каталога */

/* Корзина */

/* Личный кабинет */

Но такой подход в корне неверный. Разделять CSS необходимо на логические блоки, а не на страницы. Почему? Предположим на главной странице есть слайдер. Со временем владелец сайта передумает и захочет переместить слайдер с главной страницы на страницу каталога. Это банальное действие приведет к тому, что CSS-код слайдера окажется совсем не там где его следовало бы ожидать. 

Правильная структура CSS-файла с разделением на логические блоки

/* Общие настройки сетки */

/* Общие настройки форм */

/* Шапка */

/* Футер */

/* Модуль мини-корзины */

/* Слайдер */

/* Карточка товара */

/* Каталог товара сеткой */

/* Каталог товара списком */

/* Модуль акции */

 

3. Не используйте id в качестве селектора

Если у вас нет необходимости использовать id в качестве селектора, то не делайте этого. Как узнать есть ли необходимость? Сам факт вопроса говорит о том, что никакой необходимости у вас нет.

 

4. Классы должны иметь понятные названия

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

5. Не усложняйте селекторы без необходимости

Множественная вложенность элементов селектора создает сложности как для чтения кода так, в некоторых ситуациях, и при его использовании. Это веская причина не использовать избыточную вложенность, иерархизацию и прочие зависимости в селекторах, если в этом нет необходимости.

6. Не используйте в названии класса указание на его характеристики

Характеристики класса в названии это очевидная тавтология. Например, распространенной ошибкой являются классы наподобии:

.red {
 color: #f44242;
}

.bigBlueBtn {
 background-color: #427af4;
 padding: 10px;
 width: 300px;
 text-align: cener;
}

Жизнь - штука переменчивая. Со временем всегда возникает необходимость освежить дизайн. Через пару лет .большаяСиняяКнопка может оказаться маленькой и зеленой. Хорошо если в HTML такая кнопка одна, а если таких кнопок 20 и они разбросаны в 20 разных файлов? Менять название в HTML будет лень и вы ограничитесь правками CSS. В результате у вас будет классическая дилема: Почему на заборе написано х@й, если это забор?
 

Тоже самое касается приведенного в пример класса .red - пройдет какое-то время и красный шрифт, например, может быть обращен в зеленый и небесно-голубой. Как было указано в пункт №3, классы нужно называть исходя из функционального предназначения. Возможный вариант корректной записи нашего примера:

.text_highlight{
 color: #f44242;
}

.btn_information {
 background-color: #427af4;
 padding: 10px;
 width: 300px;
 text-align: cener;
}

P.S.

Это первая заметка в цикле "Как научиться HTML верстке?".

 

Продолжение следует... Тема семантики себя на этом не исчерпывает.
Мои PET-проекты
Матч Шредингера. Про футбол без спойлеров. Сервис помогает выбрать интересный матч для просмотра в записе. Перейти »
MafiozZz. Сервис для тех, кто любит играть в мафию. Сервис дает клубам возможность завести клубный сайт, предоставляет удобный интерфейс для ведения подобной статистики, расписания игр, выдавать игрокам награды, проводь адресную SMS рассылку (и прочие плюшки). Перейти »