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

В последнее время сообщество CSS сосредоточено на новых трюках CSS3, а более важные темы, такие как CSS Layouts, остаются в тени. Многие вещи изменились, но мы все еще используем 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;
}

и HTML

<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) мы должны написать разные ID. Если у нас 1000 блоков, мы должны написать 1000 разных ID.

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

Вот второй пример с тем же 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 в сочетании с классом, если хотите. И, наконец, нет правильного или неправильного метода кодирования . Метод Райта — тот, который работает для