Der POSTCSS -Leitfaden zur Verbesserung der Selektoren und Medienabfragen

<p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174010351218537.jpg" class="lazy" alt="The PostCSS Guide to Improving Selectors and Media Queries "> </p> <p> <strong> Kernpunkte </strong> </p> <ul> <li> postCSS bietet eine Vielzahl von Plugins, die Polyfills für die neuesten CSS -Funktionen zur Verfügung stellen und es Entwicklern ermöglichen, neue Funktionen auszuprobieren, auch wenn ihnen eine umfangreiche Browserunterstützung fehlt. </li> <li> <code>postcss-nesting</code> Das Plug-In implementiert Stilregeln, die gemäß dem W3C-Vorschlag für verschachteltes Modul untergebracht sind und einen neuen <code>&amp;amp;amp;</code> verschachtelten Selektor einführen, der sich auf den übergeordneten Selektor bezieht. </li> <li> <code>postcss-custom-selectors</code> Plugin ermöglicht das Definieren von Duplikationselektoren in Variablen, die Verringerung der Code -Duplikation und die Verbesserung der Codewartung. </li> Die Plugins <li> <code>postcss-custom-media</code> und <code>postcss-media-minmax</code> verbessern die Medienabfragen, um die Verwendung und die Verringerung der Duplikation in Stilblättern zu erleichtern. </li> </ul> <p> Die neuesten Änderungen an der CSS -Spezifikation führen einige interessante Funktionen ein. Leider befinden sich einige dieser Funktionen noch in der Entwurfsbühne, andere fehlen eine umfangreiche Browserunterstützung. Oft dauern neue Vorschläge einige Zeit, bis sie vom Browser überprüft, akzeptiert und implementiert werden. Wir können jedoch Wartezeit sparen und einige dieser Funktionen mit postcss ausprobieren. </p> <p> postCSS verfügt über verschiedene Plug-Ins, mit denen Polyfills für die neuesten CSS-Funktionen implementiert werden können. Da diese Plugins sehr breit sind, ist es schwierig, alle Plugins in einem Artikel abzudecken. Stattdessen konzentrieren wir uns auf Plugins, die sich auf das Hinzufügen neuer Funktionen zu Selektoren und Medienabfragen konzentrieren. Viele Plugins ermöglichen es uns, die Struktur des Stylesheet erheblich zu verbessern, während andere nur einen sauberen syntaktischen Zucker an die Oberseite hinzufügen. </p> <p> In diesem Artikel wird die Konfiguration und Installation von PostCSS nicht ausführlich eingeführt. Dies wurde in "Beginn with postcss" und "Verbesserung der CSS -Qualität mit Postcss" beschrieben. Als kurze Referenz können Sie auch die POSTCSS -Seite auf GitHub überprüfen. </p> <h2> Regeln nisten </h2> <p> Beginnen wir mit der grundlegendsten Funktionalität, die jedem Präprozessorenbenutzer sicherlich bekannt ist. <code>postcss-nesting</code> Plug-In-Implementierung von Style-Regeln nach W3C-verschachtelten Modulvorschlägen. </p> <p> Der Vorschlag führt einen neuen <code>&amp;amp;amp;</code> verschachtelten Selektor vor, der auf den übergeordneten Selektor verweist. Entgegen weniger oder SASS ist dieser Selektor durch Spezifikation erforderlich und muss der erste grundlegende Selektor in der Selektorkette sein, das die Verschachtelung ermöglicht. Jeder Selektor, der keine verschachtelten Selektoren enthält, wird ignoriert. Zum Beispiel: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> wird konvertiert in: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> Bitte beachten Sie, dass der folgende Code ungültig ist, da er den Auswähls <code>&amp;amp;amp;</code> wie angegeben nicht verwendet. </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p>, damit der übergeordnete Selektor überall in den Selektor eingefügt werden kann (nicht nur zu Beginn), definiert der Vorschlag eine alternative Syntax, um verschachtelte AT-RULE <code>@nest</code> zu verwenden. Wir können den <code>.latest &amp;amp;amp;amp;</code> -Alektor im vorherigen Beispiel durch: </p> beheben <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333; @nest .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> Dies wird kompilieren zu: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333 } .latest .article { border: 1px solid red }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> <code>@nest</code> Die Grammatik ist auch ausdrucksvoller als <code>&amp;amp;amp;</code>. </p> <h2> benutzerdefinierte Selector </h2> <p> Beim Schreiben von CSS neigen wir dazu, viele doppelte Selektoren zu schreiben. Dies kann ein einfacher Boilerplate -Code sein, der alle Links oder Schaltflächen auswählt, oder ein komplexerer Selektor, für den wiederholte Wiederholungen erforderlich sind. Dies kann viele Code -Duplikationen und alle zugehörigen Code -Wartungsprobleme einführen. Die neue CSS -Erweiterungsspezifikation führt eine Möglichkeit vor, Selektoren in Variablen zu speichern und aus anderen Teilen des Stylesheetes zu verweisen. Daher muss ein Wiederholungsauswahl nur einmal definiert werden und kann dann sicher an anderer Stelle wiederverwendet werden. </p> <p> postcss hat ein <code>postcss-custom-selectors</code> Plugin, das diese Funktion implementiert. Hier ist ein einfaches Beispiel, das alle Titelelemente -Selektoren definiert: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> es wird kompilieren zu: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> benutzerdefinierte Selektoren werden als Pseudoklasse implementiert, sodass die Syntax seltsam aussieht <code>:--</code>. </p> <p> Benutzerdefinierte Selektoren können effektiv mit Basisauswahlern verwendet werden. Zum Beispiel: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> kompiliert zu: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333; @nest .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> Sie können sogar mehrere benutzerdefinierte Selektoren zu einem einzelnen Selektor kombinieren, um komplexere Anordnungen zu erhalten. </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333 } .latest .article { border: 1px solid red }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> wird erzeugen: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { font-weight: bold; }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> Dieses Beispiel mag etwas übertrieben sein, aber es zeigt die Kraft dieser Funktion sehr gut. </p> <h2> Neue Pseudo-Klasse </h2> In der Spezifikation der Auswahlstufe 4 wird eine Reihe neuer Pseudoklassen eingeführt. Aufgrund der dynamischen Natur der meisten Pseudoklassen sind jedoch nur wenige als Postcss-Plug-Ins erhältlich. <p> </p> <h3> pseudoklas <code>:matches()</code> Das Plugin </h3> <p> implementiert eine neue <code>postcss-selector-matches</code> Pseudoklasse. Es ist eine Funktionsklasse, die nur Elemente filtert, die dem Selektor im Parameter entsprechen. Wenn Sie mehrere Selektoren bestehen, müssen die Elemente mindestens eines von ihnen übereinstimmen. Kurz gesagt: <code>:matches()</code> </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;h1, h2, h3, h4, h5, h6 { font-weight: bold; }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> kompiliert zu: <p> </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article :--heading .author { color: blue; }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <h3> pseudoklas <code>:not()</code> </h3> <p> Filterelemente der Pseudoklasse, die nicht mit einem bestimmten Parameter übereinstimmen. Es ist im <code>:not()</code> -Plugin implementiert. <code>postcss-selector-not</code> </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article h1 .author, .article h2 .author, .article h3 .author, .article h4 .author, .article h5 .author, .article h6 .author { color: blue; }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> Das Ergebnis ist: <p> </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;@custom-selector :--links a, a:focus, a:visited, a:hover, a:active; article :--heading :--links { color: #333; }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <h3> pseudoklas <code>:any-link</code> </h3> <p> Plugin implementiert die <code>postcss-pseudo-class-any-link</code> Pseudoklasse. Es wurde eingeführt, um die Verwirrung in der Pseudoklasse <code>:any-link</code> zu lösen. Im Gegensatz zu letzteren entspricht es allen Links - einschließlich der besuchten. <code>:link</code> </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;article h1 a, article h2 a, article h3 a, article h4 a, article h5 a, article h6 a, article h1 a:focus, article h2 a:focus, article h3 a:focus, article h4 a:focus, article h5 a:focus, article h6 a:focus, article h1 a:visited, article h2 a:visited, article h3 a:visited, article h4 a:visited, article h5 a:visited, article h6 a:visited, article h1 a:hover, article h2 a:hover, article h3 a:hover, article h4 a:hover, article h5 a:hover, article h6 a:hover, article h1 a:active, article h2 a:active, article h3 a:active, article h4 a:active, article h5 a:active, article h6 a:active { color: #333; }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> kompiliert zu: <p> </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;button:matches(:hover, :focus) { color: red; }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> Medienabfrageverbesserung <h2> </h2> Es gibt Plugins in der Bibliothek für Postcss, um Medienfragen zu vereinfachen. Sie sind <p> und <code>postcss-custom-media</code>. <code>postcss-media-minmax</code> </p> benutzerdefinierte Medien <h3> </h3> Medienabfragen schreiben die gleichen Probleme wie reguläre Selektoren - sie werden oft in Stilblättern wiederholt. Wahrscheinlich häufiger als normale Selektoren. Glücklicherweise gibt es eine Lösung, die einem benutzerdefinierten Selektor ähnelt. <p> Das Plug-In implementiert eine benutzerdefinierte Medienabfragespezifikation, die die Möglichkeit erhöht, Medienabfragen in Variablen zu speichern. <code>postcss-custom-media</code> </p> Die Syntax ist einem benutzerdefinierten Selektor sehr ähnlich. Hier ist ein einfaches Beispiel: <p> </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;button:hover, button:focus { color: red; }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> kompiliert zu: <p></p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> Natürlich können Sie mehrere benutzerdefinierte Medienabfragen gleichzeitig verwenden: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> wird erzeugen: </p> <pre class="brush:php;toolbar:false">&amp;amp;amp;lt;code class=&amp;amp;amp;quot;language-css&amp;amp;amp;quot;&amp;amp;amp;gt;.article { color: #333; /* no nested-selector */ .popular { background: #DDD; } /* the nested selector is not the fist selector in the chain */ .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }&amp;amp;amp;lt;/code&amp;amp;amp;gt;</pre> <p> Wie Sie sehen, ist es jetzt viel einfacher, die Definition von "mittlerem Ansichtsfenster" zu ändern und einen relevanten CSS -Code zu finden. </p> <h3> minimales und maximales Syntax </h3> <p> Obwohl Medienanfragen eine großartige Sache sind, haben die minimalen und maximalen Grammatiken viel Kritik von der Community erhalten. W3C reagiert mit der Einführung einer intuitiveren Syntax mit Vergleichsbetreibern. <code>postcss-media-minmax</code> Plugin fügt Unterstützung für <code>></code>, <code>>=</code>, <code><</code>, <code><=</code>, </p> hinzu. <p> </p> (der Rest des Artikels wurde aufgrund der Länge des Artikels weggelassen, aber der Bildverbesser bleibt unverändert)

Das obige ist der detaillierte Inhalt vonDer POSTCSS -Leitfaden zur Verbesserung der Selektoren und Medienabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!