Doppelte Werte für Elemente in verschiedenen Medienabfragen

Question

Ich versuche, meine riesigen Medienabfragen zu bereinigen, und ich habe jede Änderung in Elementwerten entfernt, die den Standardelementwerten entsprechen, so dass dies stattdessen angezeigt wird.

Meine Frage ist, welche Möglichkeiten ich habe, wenn die doppelten Werte in einzelnen Medienabfragen gespeichert werden? Hier

ein Beispiel:

@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; 
} 

Ich habe viele Veränderungen in Elementwerte, die nicht Duplikate innerhalb der Medien-Anfragen als auch, also kann ich nicht sie alle zusammen kombinieren. Gibt es noch andere Möglichkeiten?

Answer 1

Es ist schwierig, mit Einzelheiten zu helfen, ohne Ihre genaue Codebasis zu sehen (oder ein Beispiel aus der realen Welt). Mit dem obigen Beispiel würde ich empfehlen, für jedes dieser Elemente eine Basisklasse zu haben, damit Sie diese Stile nicht immer wieder wiederholen.

Edit: Als Beispiel für die Verwendung einer Basisklasse können Sie für den obigen Code die folgende Klasse erstellen und sie jedem der Elemente hinzufügen, die diese Styling-Eigenschaften verwenden sollen (also alle Icon-Elemente):

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

Dies würde einen guten Teil doppelten Codes eliminieren und ein modulares Site-Design erstellen.

Soweit Medienabfragen/doppelte Werte betreffen, hier ist, wie ich reagierende Elemente auf Websites, mit denen ich arbeite, behandeln. Es gibt drei primäre Gerätegrößen, die ich in Betracht ziehe: desktop, tablet und mobile. Also, wenn ich ein Symbol bin zu schaffen, zum Beispiel mit Standard-Styling über zwei oder mehr Gerätegrößen, werde ich wie folgt vorgehen:

/* 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 */ 
} 

nun für jede Medien-Abfrage einen margin Wert erkläre Ich muß nicht , überschreibe es einfach für den, der anders sein wird. Ich würde auch empfehlen, einen CSS-Präprozessor wie SASS oder LESS zu betrachten und zu verwenden. Sie sind überraschend einfach zu verwenden und helfen, Ihren Code so DRY wie möglich zu halten. Viel Glück!