Хочу сегодня рассмотреть такой вопрос, зачем нужны в 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 элемент может получить много классов. Один отвечает за цвет, другой — за позиционирование, третий — за видимость и т.д. и т.п.
В общем, несколько классов нужны для того, чтобы общие свойства элементов прописать вместе, а уникальные — в отдельных уникальных классах.
Спасибо, Михаил! За короткую, но важную информацию!!!