Дублирующие значения для элементов в разных запросах на медиа

Question

Я пытаюсь очистить свои огромные медиа-запросы, и я удалил каждое изменение значений элементов, которые совпадают с значениями по умолчанию, чтобы это отображалось вместо этого.

Мой вопрос в том, какие варианты у меня есть, когда повторяющиеся значения хранятся в отдельных запросах на носители?

Вот пример:

@media only screen and (min-width: 480px) and (max-width: 767px) { 
.fa.fa-check 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-shopping-cart 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-user 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

@media only screen and (max-width: 479px) { 
.fa.fa-check 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-shopping-cart 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 
.fa.fa-user 
{ 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

У меня есть много изменений значений элементов, которые не являются дубликатами внутри запросов СМИ, так что я не могу объединить их все вместе. Есть ли другие варианты?

Answer 1

Трудно помочь со спецификой, не видя вашу точную базу кода (или пример реального мира). В приведенном выше примере я бы рекомендовал иметь базовый класс для каждого из этих элементов, чтобы вы не повторяли эти стили снова и снова.

Редактировать: как пример использования базового класса, для вышеуказанного кода вы можете сделать следующий класс и добавить его к каждому из элементов, которые вы хотите использовать для этих свойств стилей (так что все элементы значков):

.standard-icon { 
    font-size: 3em; 
    border-radius: 100px; 
    height: 100px; 
    line-height: 100px; 
    width: 100px; 
} 

Это устранит хороший кусок дублированного кода и создаст более модульный дизайн сайта.

Что касается медиа-запросов/повторяющихся значений, вот как я обрабатываю чувствительные элементы на сайтах, с которыми я работаю. Есть три основных размера устройства, которые я считаю, desktop, tablet и mobile. Так что, если я создаю иконку, например, с моделированием по умолчанию в двух или более размеров устройства, я сделаю следующее:

/* Default styling */ 
.icon-example { 
    width: 40px; 
    height: 40px; 
    margin: 40px 0; /* Style which spans two or more queries */ 
    color: white; 
    background: black; 
} 

@media @mobile-grid { 
    margin: 30px 0; /* Overriding this style only on mobile */ 
} 

Теперь я не должен объявлять значение margin для каждого запроса СМИ , просто переопределите его для того, который будет другим. Я также рекомендую изучить и использовать препроцессор CSS, например Sass или LESS. Они удивительно просты в использовании и помогают сохранить ваш код как сухим, насколько это возможно. Удачи!