Зачем добавлять в css несколько классов одному элементу?

Хочу сегодня рассмотреть такой вопрос, зачем нужны в css несколько классов для одного элемента? А также разобрать, в каких случаях это необходимо.

Зачем писать несколько классов одному элементу в css?

Итак, давайте я приведу простейший пример кода, где у каждого div имеется несколько классов:

<div class = "block block1"></div>
<div class = "block block2"></div>
<div class = "block block3"></div>

Что это дает? Мы можем стилизовать все 3 блока с помощью одного селектора, а потом к каждому применить какое-то оформление, которое будет отличать его от других.

.block{
	width: 150px;
	height: 110px;
	border: 2px solid black;
	display: inline-block;
}

Все 3 блока получат одинаковые размеры, рамку и станут в одну строчку. А теперь мы можем обратиться к уникальным классам, у каждого блока он разный. Таким образом мы сократили код. Вместо того, чтобы определять все свойства для каждого блока, мы вынесли общие в отдельный класс, а уникальные пропишем в другом классе.

.block1{
	background: red;
}
.block2{
	background: green;
}
.block3{
	background: brown;
}

несколько классов
В общем, выделить каждый блок в отдельный цвет можно было бы и по-другому, смотрите статью о работе со свойством nth-child, где я рассматриваю эту тему.

Другой пример, когда блоку задается несколько классов, это когда используется css фреймворк. Например, Bootstrap. В таком случае один html элемент может получить много классов. Один отвечает за цвет, другой — за позиционирование, третий — за видимость и т.д. и т.п.

В общем, несколько классов нужны для того, чтобы общие свойства элементов прописать вместе, а уникальные — в отдельных уникальных классах.

Комментариев: 1
  1. Валерий

    Спасибо, Михаил! За короткую, но важную информацию!!!

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: