Правило ниже по файлу не побеждает: какой фон получит элемент

.badge { background: gray; }

#sidebar .badge { background: blue; }

.badge.badge--danger { background: red; }

<aside id="sidebar">
  <span class="badge badge--danger">3</span>
</aside>

• Красный: правило с модификатором идёт последним в файле, а при конфликте побеждает последнее объявление.
• Синий: селектор с идентификатором весит больше двух классов, и порядок правил в этом случае значения не имеет.
• Красный: два класса в сумме дают больший вес, чем один идентификатор.
• Серый: конфликтующие правила отбрасываются, остаётся базовое объявление.