Семантика и корректность в CSS

Так сложилось, что в последние время стали путать семантику с установившимися правилами назначать корректные имена. Такие обозначения, как class="left" и class="clear" считают несемантическими, хотя в действительности охват семантики не распространяется так далеко.

Несемантический код

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

HTML

<div class="nav-link"><a href="/">Home</a></div>
<div class="nav-link"><a href="/about/">About</a></div>
<div class="page-title">About</div>
<div>This is some page text about some stuff...</div>

Бессмысленный (некорректный) код

Код без сомнения семантически верен, только он использует нелепые классы:

HTML

<div class="border">
<h2 class="red">This is a heading</h2>
</div>

Семантика относится к элементам…

…а не к именам, которые им назначаются. В использовании правильно выбранных элементов по их прямому назначению и заключается суть семантики. Стандарты обозначения этих элементов целиком связаны с корректностью (sensibility).

Семантика устанавливает стандарты, отойти от которых довольно сложно. Заголовки размечаются <h1–6>, списки <ul/ol/dl> и так далее. Однако нельзя определить правила, по которым называют идентификаторы и классы. <div id="contact">, <div id="kontact"> и <div id="contact-info"> - все имеют различные имена, но также все в равной степени семантически верны. Все три являются примерами семантического и корректного кода.

Однако взгляните на следующие примеры: <div id="bottom">, <div id="lower-area"> и <div id="b">. Они имеют семантически верный код, но бессмысленные имена.

Будьте благоразумны.

Следуйте семантике, хотя бы потому, что веб-стандарты – это хорошо. Назначение имен, однако, целиком зависит от вас, можете называть элементы так, как хотите. <div id="a">, <div id="b"> и <div id="c"> - все эти названия возможны, но они не совсем корректны.

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

С одной стороны - это корректно и терпимо, с другой - совсем неблагоразумно. Он возможно и знает что выполняют .а, .b и .с , но как насчет человека, которому достанется этот проект? Несмотря на то, что его доводы и верны (разметка небольшая), первые впечатления человека, который увидит его код: «какого черта он придумал это?». Всегда кодируйте, как будто вы работаете в команде, даже если это не так.

Заключительное слово

Семантика и корректность не одно и тоже. Любой, кто скажет вам, что следующий код class="left" несемантический, неправ (код некорректный). Будьте благоразумны и следуйте семантике. Выбирайте описывающие имена. ID/class следует назначать настолько небольшими, насколько это возможно, а если необходимо длинными.