Responsive Styling mit Attribut -Selektoren

Eine Herausforderung mit atomisierten Stilen, die auf Klassennamen basieren, besteht darin, dass sie häufig auf bestimmten Haltepunkten beruht, um den Kontext zu bestimmen.

<div></div>
<div></div>
<div></div>

Präfixe werden normalerweise verwendet, um jeden Haltepunkt zu lokalisieren:

<div></div>

Dies funktioniert gut, bevor Sie mehrere Klassen hinzufügen. Wenn wir jedoch anfangen, mehrere Klassen hinzuzufügen, ist es schwierig zu verfolgen, welche Klassen mit welchen Breakpoints und dem Hinzufügen, Löschen oder Ändern von Inhalten in Verbindung gebracht werden.

<div>
</div>

Wir können versuchen, die Lesbarkeit durch Neugruppen zu verbessern:

<div>
</div>

Wir können auch einige spezielle Splitter hinzufügen (ungültige Klassennamen werden ignoriert):

<div>
</div>

Aber es fühlt sich immer noch verwirrend und schwer zu verstehen.

Wir können einen besseren Überblick erhalten und es vermeiden, Präfixe durch Gruppierung von Eigenschaftsauswahlern anstelle von tatsächlichen Klassen zu implementieren:

<div data-lg="span-4 font-size-xl font-weight-700" data-md="span-6 font-size-xl font-weight-500" data-sm="span-12 font-size-lg"></div>

Dies sind keine Sammlungen von Klassen, sondern Mengen von platz getrennten Eigenschaften, die wir mit dem Selektor von [attribute~="value"] auswählen können, wobei ~= erfordert, dass das genaue Wort im Attributwert angezeigt wird.

 @media (Min-Width: 0) {
 [data-sm ~ = "span-1"] {/*...*/}
 [data-sm ~ = "span-2"] {/*...*/}
 /* usw. */
}
@media (Min-Width: 30Rem) {
 [data-md ~ = "span-1"] {/*...*/}
 [data-md ~ = "span-2"] {/*...*/}
 /* usw. */
}
@media (Min-Width: 60Rem) {
 [data-lg ~ = "span-1"] {/*...*/}
 [data-lg ~ = "span-2"] {/*...*/}
 /* usw. */
}

Dies mag ein wenig seltsam erscheinen, aber ich denke, es ist ziemlich einfach, eine Atomklasse in eine Eigenschaft zu konvertieren (z. B. konvertieren .sm-span-1 in [data-sm~="span-1"] ). Darüber hinaus hat der Immobilienwählte die gleiche Spezifität wie die Klasse, sodass wir nichts verlieren. Darüber hinaus können im Gegensatz zu Klassen Eigenschaften geschrieben werden, ohne Sonderzeichen zu entkommen (z. / .:? ).

Das war's! Auch dies ist nur eine Idee, um das Schreiben, Lesen und Verwalten von Schaltanweisungen in Medienfragen zu erleichtern. Dies ist definitiv kein Vorschlag, Klassen oder ähnliches zu stornieren.

Das obige ist der detaillierte Inhalt vonResponsive Styling mit Attribut -Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!