Несколько классов в одном элементе html

Хорошо ли использовать многие классы на одном HTML-элементе? Например:

<div class="nav nav-centered nav-reversed navbar navigation-block"></div>

Я не имею в виду, что два или три класса на одном элементе плохие, но как насчет четырех, пяти или даже шести?

Ответы

Ответ 1

Краткий ответ

Да.

Описание

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

В следующем примере показано использование нескольких классов.

Первый класс создает текст color красный.

Второй класс создает background-color синий.

Посмотрите, как будет выглядеть элемент DOM с несколькими классами, он будет носить оба инструктора CSS одновременно.

Результат: несколько операторов CSS в разных классах будут складываться.

Вы можете больше узнать о Специфика CSS.

CSS

.class1 {
    color:red;
}

.class2 {
    background-color:blue;
}

HTML

<div class="class1">text 1</div>
<div class="class2">text 2</div>
<div class="class1 class2">text 3</div>

Живая демонстрация

Ответ 2

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

Но, как правило, нет хорошей практики прикрепить 10 имен классов к объекту, потому что, скорее всего, для чего вы их используете, вы можете сделать то же самое с гораздо меньшим количеством классов. Вероятно, всего 1 или 2.

Чтобы квалифицировать этот оператор, плагины и скрипты javascript могут добавлять гораздо больше классных имен, чтобы делать то, что они собираются делать. Например, Modernizr добавляет в ваш тег тела от 5 до 25 классов, и для этого есть веская причина. Пользовательский интерфейс jQuery добавляет много классных имен при использовании одного из виджетов в этой библиотеке.