Наследование классов в CSS — class, id, !importent

Разберём, как наследуются значения стилей для классов.

В CSS существует последовательность применения стилей для классов.

Например у нас есть следующая структура:

<div class="block">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

Стили у elements например будут одни, где присутствует одинаковый белый фон.

.element{
    background: white;
}

1. Применение дополнительного класса для перезаписи стиля определённого блока

Если мы добавим например к последнему блоку <div class=»element»></div> дополнительный стиль element-two :

<div class="block"> 
    <div class="element"></div> 
    <div class="element"></div> 
    <div class="element element-two"></div> 
</div>

И стиль для класса element-two  добавим другой цвет фона, например красный. У такого блока с дополнительным классом перезапишутся стили, поменяется фон блока на красный:

.element-two{
    background: red;
}

2. Добавление id для перезаписи стиля дополнительного класса element-two

<div class="block" id="block"> 
    <div class="element"></div> 
    <div class="element"></div> 
    <div class="element element-two"></div> 
</div>

При добавлении id к блоку в HTML и написании стиля для класса element-two с добавлением #block, те стили которые применялись ранее только для дополнительного стиля element-two перезапишутся за счёт айдишника:

#block .element-two{
    background: yellow;
}

2. Добавление !important к значению перезапишет стиль, делая его важным.

Important — переводится как важный и применив данное дополнение к значению, сделает значение ещё более приоритетным:

#block .element-two{
    background: yellow !important; 
}

Но применение !important не является хорошим тоном в среде веб-разработчиков, означает, что при написании кода, что-то было упущено, где-то был просчёт в иерархии при определении классов.

Данный метод не является ошибкой, просто не так круто выглядит в глазах опытных программистов!)