Почему нельзя использовать important и какая есть ему замена?

Question

[lemonlimelike]

Как правильно использовать media запрос не использую !important

Answer 1

[chelkaz]

В CSS приоритет в последовательности! Чем ниже тем выше приоритет. (Без important) конечно.
Медиа запросы идут после основных.
Вот пример правильной цепочки медиа:

/** Medium devices (tablets, 544 and up sm) **/
@media (min-width: 544px) {

}

/** Medium devices (tablets, 768 and up sm) **/
@media (min-width: 768px) {

}

/** Large devices (desktops, 992px and up lg) **/
@media (min-width: 992px) {

}

/** Extra large devices (large desktops, 1200px and up xl) **/
@media (min-width: 1200px) {

}

/** ****************   ******************   **************** **/

/** Large devices (desktops, less than 1200px) **/
@media (max-width: 1199px) {

}
/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991px) {

}
/** Small devices (landscape phones, less than 768px) **/
@media (max-width: 767px) {

}
/** Extra small devices (portrait phones, less than 544px ) **/
@media (max-width: 543px) {

}

/** ******************   ******************   ****************** **/

/** Medium devices (tablets, 544 and up) **/
@media (min-width: 544px) and (max-width: 767px) {

}

/** Medium devices (tablets, 768px and up) **/
@media (min-width: 768px) and (max-width: 991px) {

}

/** Large devices (desktops, 992px and up) **/
@media (min-width: 992px) and (max-width: 1199px) {

}

Answer 2

[profesor08]

Вот ты написал например:

.container .item .title .name { 
    color: red; 
}

А потом пишешь что-то вроде:

@media only screen and (min-width:1200px) {
    .title .name {
        color: blue;
    }
}

Ты изначально не знаешь приоритетов селекторов, и удивляешься, что что-то не работает и бежишь использовать important, хотя приоритеты селекторов разжевываются сразу при знакомстве с CSS.