div {font-size:14px}
@media (max-width: 767.98px) {
div {background-color: #f00}
}
@media (min-width: 768px) {
div {background-color: #000}
}
div {font-size:14px; background-color: #f00;}
@media (min-width: 768px) {
div {background-color: #000}
}
Особенно полезный такой подход в ситуации, когда мы добавляем какой-нибудь класс с помощью jsэто очень вредный подход. Когда открываешь js и в нем прописаны условия сразу видно, что делает скрипт. А так ты его открываешь и думаешь, что пошло не так, лезешь в тулзы смотришь, класс есть но стили перебиты, идешь в css. Довольно геморно не так ли?
<div class="menu">
<a>Главная</a>
<a>Новости</a>
<a>Блок</a>
</div>
эти ссылки просто напросто слипнуться, и будучи зрячим с телефона уже по ним будет труднее попасть. А так твой сайт будет более дружелюбным для пользователя.