Как может быть полезно использование нескольких css классов у одного html элемента?

Question

[123qwe]

Приведите пару примеров, где это может быть применено?
Вижу оч часто по 3-4 суют, но не понимаю для чего и как это используется.

Answer 1

[TheBububo]

<div class="module module_center module_grey js-scroll js-scroll-inited"> ... </div>

module {
width: 100%;
box-sizing: border-box;
padding: 10px;
}
module_grey {
background: #ccc;
}
module_center {
text-align: center;
}

Например, дизайн предполагает несколько похожих модулей в разных местах, но они могут незначительно отличаться. Тогда всё общее для всех модулей пишется в один класс, а отличительные особенности по другим.
И отдельно еще навешивается класс, для работы с JS, чтобы логика не была связана с внешним видом. Также могут уже скриптами навязываться классы состояния - типа hidden, inited, active и т.п.

Answer 2

[Serj-One]

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

<div class="catalog">
	<div class="gallery gallery--alt catalog__gallery">
		...
	</div>
</div>

Класс gallery задаёт общее оформление галереи.
Класс catalog__gallery задаёт размеры и позицию относительно нужной секции.
Класс gallery--alt - класс-модификатор, допустим, альтернативное оформление с незначительными изменениями.

Comments

[123qwe]

так те стили, которые я задам классу catalog_gallery не перезапишутся теми, которые я после опишу для класса galery-alt?Ведь они же один и тот же див оформляют.

[Serj-One]

123qwe: Классы .catalog__gallery и .gallery задают разные свойства. А .gallery--alt и призван переопределить некоторые свойства или дополнить. Но вообще, да правильней будет .catalog__gallery поместить в конец, пример был написан для понимания сути.

[TheBububo]

Можно регулировать приоритет вложенностью селекторов. Чем больше вложенность, тем выше приоритет. Например .catalog .catalog__gallery { } приоритетнее чем .gallery--alt {}.
Или так .gallery.gallery--alt { } (без пробела, блок должен иметь оба класса) приоритетнее чем .catalog__gallery

[123qwe]

Serj-One: Я все равно не улавливаю.Если мы диву дадим класс такой-то, и такой-то, то свойства, описанные для первого класса, например, цвет, позиционирование, и тд, будут одними, а потом для этого-же дива мы будем еще что-то писать, только другое.Я не понимаю, зачем еще то класс, еслиможно в том же написать.

[Serj-One]

123qwe: Вы понимаете, что однотипных блоков может быть много, и они могут чем-то отличаться? Мыслите масштабно.
Создаём базовый класс, и описываем в нём оформление. Этот класс мы будем использовать многократно, и его стили больше не трогаем. Но в зависимости от контекста положение и размеры этого блока могут быть различными. В таком случае добавляем ему класс, описывающий его как элемент блока, и через этот класс позиционируем. В зависимости от родителя эти свойства могут быть различными. Модификатор нужен для того, чтоб заранее описать несколько вариантов оформления, и использовать нужный.

Answer 3

[ommunist]

В Wordpress можете иметь селективные дизайны на страницах выдаваемых по одному шаблону php, за счет использования класса конкретного post ID например.