Пишите современный CSS — используйте класс

Многие вещи изменились, но мы все еще используем ID для прямого стиля. Это означает, что у нас есть #header, #footer, #navigation, #main… и мы применяем стилизацию к этому идентификатору.

Что не так с этим кодом и подходом? В HTML нет ничего плохого, он совершенно семантический и логичный. Проблема в CSS.

Вы все видели CSS так:

#main { margin:0 auto; width:900px;}
#header{
float:left;
width:900px;
}
#footer{
float:left;
width:900px;
}
#navigation{
float:left;
 width:150px;
}
#sidebar{
float:left;
width:150px;
}
#content{
float:left;
 width:600px;
}

<div id="main">
<div id="header">#header</div>
<div id="navigation">#navigation</div>
<div id="content">#content</div>
<div id="sidebar">#sidebar</div>
<div id="footer">#footer</div>
</div>

Пример ID

Мы напрямую используем ID для макета. Но мы забываем, что ID можно использовать
один раз и только один раз .

Это не гибкий!

Для каждого строительного блока (DIV) мы должны написать разные идентификаторы. Если у нас 1000 блоков, мы должны написать 1000 разных идентификаторов.

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

Вот второй пример с тем же HTML, но другим CSS. Обратите внимание, что эта модель поддерживает семантическое кодирование. Мы используем ID для предоставления логических и семантических областей HTML, но мы используем класс для всех стилей.

#main { margin:0 auto; width:900px;}
.w150,.w600,.w900 {float:left;}
.w900 {width:900px;}
.w600 {width:600px;}
.w150 {width:150px;}

И HTML:

<div id="main">
<div id="header" class="w900"> </div>
<div id="navigation" class="w150"> </div>
<div id="content" class="w600"> </div>
<div id="sidebar" class="w150"> </div>
<div id="footer" class="w900"> </div>
</div>

Пример с классом

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

Давайте создадим пример фотогалереи.

Галерея изображений с использованием ID

Галерея изображений с использованием класса

Просмотр исходного кода последних двух примеров.

И у нас есть
2 строки кода для макета с использованием класса против 9 строк CSS с использованием идентификаторов .

Я думаю, что более чем очевидно, что с помощью класса мы можем писать меньше кода.

Почему бы нам не попытаться расширить второй пример и построить расширенную систему макетов.

/* w for width */
.w150, .w300, .w450, .w600, .w750, .w900 {float:left;}
.w150{width:150px}
.w300{width:300px}
.w450{width:450px}
.w600{width:600px}
.w750{width:750px}
.w900{width:900px}
.clear{clear:both;}

И у нас есть собственный
CSS Framework .
Пример CSS Framework .
Кто-то спросит: а как же
скорость выполнения.
Согласно этим тестам классы работают лучше, чем ID в большинстве современных браузеров. К сожалению, я получаю противоречивые результаты по каждому показателю. Так что я буду рад, если кто-то сможет подтвердить мое заявление.
Заключительные мысли :
смысл этой статьи в том, что класс более гибкий, чем id. Эффективно вы можете написать меньше кода с классами. Вы всегда можете использовать семантический HTML и ID с комбинацией классов, если хотите.
И последнее:
нет правильного или неправильного метода кодирования