<p><img src="/static/imghw/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>核心要點(diǎn)</strong></p> <ul> <li>PostCSS 提供各種插件，為最新的 CSS 功能提供 polyfill，允許開發(fā)者嘗試新功能，即使它們?nèi)狈V泛的瀏覽器支持。</li> <li> <code>postcss-nesting</code> 插件根據(jù) W3C 嵌套模塊提案實現(xiàn)樣式規(guī)則嵌套，引入新的 <code>&amp;amp;amp;</code> 嵌套選擇器，引用父選擇器。</li> <li> <code>postcss-custom-selectors</code> 插件允許在變量中定義重復(fù)選擇器，減少代碼重復(fù)并改進(jìn)代碼維護(hù)。</li> <li> <code>postcss-custom-media</code> 和 <code>postcss-media-minmax</code> 插件改進(jìn)了媒體查詢，使其更易于使用并減少樣式表中的重復(fù)。</li> </ul> <p>CSS 規(guī)范的最新變化引入了一些有趣的功能。不幸的是，其中一些功能仍處于草案階段，而其他功能則缺乏廣泛的瀏覽器支持。通常情況下，新的建議需要一段時間才能被瀏覽器審查、接受和實現(xiàn)。但是，我們可以節(jié)省等待時間，并使用 PostCSS 嘗試其中一些功能。</p> <p>PostCSS 有各種插件旨在為最新的 CSS 功能實現(xiàn) polyfill。由于這些插件的范圍很廣，在一篇文章中涵蓋所有插件是困難的。相反，我們將關(guān)注那些專注于為選擇器和媒體查詢添加新功能的插件。許多插件將允許我們顯著改進(jìn)樣式表的結(jié)構(gòu)，而其他插件可能只是在頂部添加一些簡潔的語法糖。</p> <p>本文不會詳細(xì)介紹 PostCSS 的配置和安裝。這已在“PostCSS 入門”和“使用 PostCSS 提升 CSS 質(zhì)量”中介紹過。作為快速參考，您也可以查看 GitHub 上的 PostCSS 頁面。</p> <h2 id="規(guī)則嵌套">規(guī)則嵌套</h2> <p>讓我們從最基本的功能開始——對每個預(yù)處理器用戶來說肯定都很熟悉——嵌套。<code>postcss-nesting</code> 插件根據(jù) W3C 嵌套模塊提案實現(xiàn)樣式規(guī)則嵌套。</p> <p>該提案引入了一個新的 <code>&amp;amp;amp;</code> 嵌套選擇器，它引用父選擇器。與 Less 或 Sass 相反，根據(jù)規(guī)范，此選擇器是必需的，并且必須是選擇器鏈中的第一個基本選擇器才能啟用嵌套。任何不包含嵌套選擇器的選擇器都將被忽略。例如：</p> <pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre> <p>將被轉(zhuǎn)換為：</p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre> <p>請注意，以下代碼無效，因為它沒有按照規(guī)定使用 <code>&amp;amp;amp;</code> 選擇器。</p> <pre class='brush:php;toolbar:false;'>.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; } }</pre> <p>為了允許將父選擇器插入選擇器中的任何位置（而不僅僅是開頭），該提案定義了使用嵌套 at-rule <code>@nest</code> 的替代語法。我們可以通過以下方式修復(fù)上一個示例中的 <code>.latest &amp;amp;amp;amp;</code> 選擇器：</p> <pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }</pre> <p>這將編譯成：</p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre> <p><code>@nest</code> 語法也比 <code>&amp;amp;amp;</code> 更具表現(xiàn)力。</p><h2 id="自定義選擇器">自定義選擇器</h2> <p>編寫 CSS 時，我們傾向于編寫許多重復(fù)的選擇器。這可能是選擇所有鏈接或任何按鈕的簡單樣板代碼，或者需要反復(fù)重復(fù)的更復(fù)雜的選擇器。這可能會引入許多代碼重復(fù)以及所有相關(guān)的代碼維護(hù)問題。新的 CSS 擴(kuò)展規(guī)范引入了一種將選擇器存儲在變量中并從樣式表的其他部分引用它們的方法。因此，重復(fù)的選擇器只需定義一次，然后就可以安全地在其他地方重復(fù)使用。</p> <p>PostCSS 有一個 <code>postcss-custom-selectors</code> 插件實現(xiàn)了此功能。這是一個定義所有標(biāo)題元素選擇器的簡單示例：</p> <pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre> <p>它將編譯成：</p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre> <p>自定義選擇器作為偽類實現(xiàn)，因此語法看起來很奇怪 <code>:--</code>。</p> <p>自定義選擇器可以有效地與基本選擇器一起使用。例如：</p> <pre class='brush:php;toolbar:false;'>.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; } }</pre> <p>編譯成：</p> <pre class='brush:php;toolbar:false;'>.article { color: #333; @nest .latest &amp;amp;amp;amp;amp; { border: 1px solid red; } }</pre> <p>您甚至可以將多個自定義選擇器組合到單個選擇器中以實現(xiàn)更復(fù)雜的排列。</p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .latest .article { border: 1px solid red }</pre> <p>將產(chǎn)生：</p> <pre class='brush:php;toolbar:false;'>@custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { font-weight: bold; }</pre> <p>此示例可能略微夸張，但它很好地演示了此功能的強(qiáng)大功能。</p> <h2 id="新的偽類">新的偽類</h2> <p>選擇器級別 4 規(guī)范引入了一堆新的偽類，但由于大多數(shù)偽類的動態(tài)特性，只有幾個可作為 PostCSS 插件使用。</p> <h3 id="code-matches-code-偽類"><code>:matches()</code> 偽類</h3> <p><code>postcss-selector-matches</code> 插件實現(xiàn)了新的 <code>:matches()</code> 偽類。它是一個函數(shù)類，僅篩選與參數(shù)中選擇器匹配的元素。如果您傳遞多個選擇器，則元素必須至少匹配其中一個。簡而言之：</p> <pre class='brush:php;toolbar:false;'>h1, h2, h3, h4, h5, h6 { font-weight: bold; }</pre> <p>編譯成：</p> <pre class='brush:php;toolbar:false;'>.article :--heading .author { color: blue; }</pre> <h3 id="code-not-code-偽類"><code>:not()</code> 偽類</h3> <p><code>:not()</code> 偽類篩選不匹配任何給定參數(shù)的元素。它在 <code>postcss-selector-not</code> 插件中實現(xiàn)。</p> <pre class='brush:php;toolbar:false;'>.article h1 .author, .article h2 .author, .article h3 .author, .article h4 .author, .article h5 .author, .article h6 .author { color: blue; }</pre> <p>結(jié)果是：</p> <pre class='brush:php;toolbar:false;'>@custom-selector :--links a, a:focus, a:visited, a:hover, a:active; article :--heading :--links { color: #333; }</pre> <h3 id="code-any-link-code-偽類"><code>:any-link</code> 偽類</h3> <p><code>postcss-pseudo-class-any-link</code> 插件實現(xiàn)了 <code>:any-link</code> 偽類。引入它是為了幫助解決圍繞 <code>:link</code> 偽類的混淆。與后者不同，它匹配所有鏈接——包括已訪問的鏈接。</p> <pre class='brush:php;toolbar:false;'>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; }</pre> <p>編譯成：</p> <pre class='brush:php;toolbar:false;'>button:matches(:hover, :focus) { color: red; }</pre> <h2 id="媒體查詢改進(jìn)">媒體查詢改進(jìn)</h2> <p>PostCSS 的庫中有一些插件旨在使媒體查詢更易于使用。它們是 <code>postcss-custom-media</code> 和 <code>postcss-media-minmax</code>。</p> <h3 id="自定義媒體">自定義媒體</h3> <p>編寫媒體查詢會產(chǎn)生與常規(guī)選擇器相同的問題——它們在樣式表中經(jīng)常重復(fù)?？赡鼙绕胀ㄟx擇器更頻繁。幸運(yùn)的是，有一個類似于自定義選擇器的解決方案。<code>postcss-custom-media</code> 插件實現(xiàn)了自定義媒體查詢規(guī)范，該規(guī)范增加了將媒體查詢保存到變量中的能力。</p> <p>語法與自定義選擇器非常相似。這是一個簡單的例子：</p> <pre class='brush:php;toolbar:false;'>button:hover, button:focus { color: red; }</pre> <p>編譯成：</p><pre class='brush:php;toolbar:false;'>.article { color: #333; &amp;amp;amp;amp;.popular { background: #DDD; } &amp;amp;amp;amp; .title { font-weight: bold; } }</pre> <p>當(dāng)然，您可以一次使用多個自定義媒體查詢：</p> <pre class='brush:php;toolbar:false;'>.article { color: #333 } .article.popular { background: #DDD } .article .title { font-weight: bold }</pre> <p>將產(chǎn)生：</p> <pre class='brush:php;toolbar:false;'>.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; } }</pre> <p>如您所見，現(xiàn)在更改“中等視口”的定義以及查找任何相關(guān)的 CSS 代碼都容易得多。</p> <h3 id="最小值和最大值語法">最小值和最大值語法</h3> <p>盡管媒體查詢是一件很棒的事情，但最小值和最大值語法受到了社區(qū)的很多批評。W3C 通過使用比較運(yùn)算符引入更直觀的語法來回應(yīng)。<code>postcss-media-minmax</code> 插件增加了對 <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 的支持。</p> <p>(文章剩余部分由于篇幅過長，已省略，但圖片鏈接保持不變)</p>

以上是PostCSS改進(jìn)選擇器和媒體查詢指南的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！