CSS лучший способ установить пользовательские модификации CSS

Question

У меня есть следующие стили:

.alert { 
    position: relative; 
    border: 0; 
} 

.modal .modal-dialog .modal-content { 
    border-radius: 6px; 
    padding: 20px 20px 0 20px; 
} 

Это относится к:

<div class="modal"></div> 

Я хочу иметь различный стиль что-то вроде этого:

<div class="modal alert"></div> 

Но я не хочу, чтобы .alert применялся, потому что этот стиль предназначен для других элементов.

Я делаю это:

.modal .alert .modal-dialog .modal-content { 
    border-radius: 15px; 
    background-color: #F3F3F3; 
    padding: 0px 10px 0 5px; 
} 

Но я получаю .alert применен стиль.

Любые подсказки?

Answer 1

Если вы хотите .modal.alert не наследуют стили .alert, то вы должны указать его в определении .alert стиль:

.alert:not(.modal) { 
    position: relative; 
    border: 0; 
} 

Как @cale_b комментарии, лучше назначить другое имя класса .modal.alert, так что вам не нужно включать селектор :not().

Например: <div class="modal modal_alert"></div>