<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 嵌套模塊提案實(shí)現(xiàn)樣式規(guī)則嵌套，引入新的 <code>&amp;amp;amp;</code> 嵌套選擇器，引用父選擇器。 </li> <li> <code>postcss-custom-selectors</code> 插件允許在變量中定義重複選擇器，減少代碼重複並改進(jìn)代碼維護(hù)。 </li> <li> <code>postcss-custom-media</code> 和 <code>postcss-media-minmax</code> 插件改進(jìn)了媒體查詢，使其更易於使用並減少樣式表中的重複。 </li> </ul> <p>CSS 規(guī)範(fàn)的最新變化引入了一些有趣的功能。不幸的是，其中一些功能仍處?kù)恫莅鸽A段，而其他功能則缺乏廣泛的瀏覽器支持。通常情況下，新的建議需要一段時(shí)間才能被瀏覽器審查、接受和實(shí)現(xiàn)。但是，我們可以節(jié)省等待時(shí)間，並使用 PostCSS 嘗試其中一些功能。 </p> <p>PostCSS 有各種插件旨在為最新的 CSS 功能實(shí)現(xiàn) polyfill。由於這些插件的範(fàn)圍很廣，在一篇文章中涵蓋所有插件是困難的。相反，我們將關(guān)注那些專注於為選擇器和媒體查詢添加新功能的插件。許多插件將允許我們顯著改進(jìn)樣式表的結(jié)構(gòu)，而其他插件可能只是在頂部添加一些簡(jiǎn)潔的語(yǔ)法糖。 </p> <p>本文不會(huì)詳細(xì)介紹 PostCSS 的配置和安裝。這已在“PostCSS 入門”和“使用 PostCSS 提升 CSS 質(zhì)量”中介紹過。作為快速參考，您也可以查看 GitHub 上的 PostCSS 頁(yè)面。 </p> <h2 id="規(guī)則嵌套">規(guī)則嵌套</h2> <p>讓我們從最基本的功能開始——對(duì)每個(gè)預(yù)處理器用戶來(lái)說(shuō)肯定都很熟悉——嵌套。 <code>postcss-nesting</code> 插件根據(jù) W3C 嵌套模塊提案實(shí)現(xiàn)樣式規(guī)則嵌套。 </p> <p>該提案引入了一個(gè)新的 <code>&amp;amp;amp;</code> 嵌套選擇器，它引用父選擇器。與 Less 或 Sass 相反，根據(jù)規(guī)範(fàn)，此選擇器是必需的，並且必須是選擇器鏈中的第一個(gè)基本選擇器才能啟用嵌套。任何不包含嵌套選擇器的選擇器都將被忽略。例如：</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>請(qǐng)注意，以下代碼無(wú)效，因?yàn)樗鼪]有按照規(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> 的替代語(yǔ)法。我們可以通過以下方式修復(fù)上一個(gè)示例中的 <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> 語(yǔ)法也比 <code>&amp;amp;amp;</code> 更具表現(xiàn)力。 </p><h2 id="自定義選擇器">自定義選擇器</h2> <p>編寫 CSS 時(shí)，我們傾向於編寫許多重複的選擇器。這可能是選擇所有鏈接或任何按鈕的簡(jiǎn)單樣板代碼，或者需要反復(fù)重復(fù)的更複雜的選擇器。這可能會(huì)引入許多代碼重複以及所有相關(guān)的代碼維護(hù)問題。新的 CSS 擴(kuò)展規(guī)範(fàn)引入了一種將選擇器存儲(chǔ)在變量中並從樣式表的其他部分引用它們的方法。因此，重複的選擇器只需定義一次，然後就可以安全地在其他地方重複使用。 </p> <p>PostCSS 有一個(gè) <code>postcss-custom-selectors</code> 插件實(shí)現(xiàn)了此功能。這是一個(gè)定義所有標(biāo)題元素選擇器的簡(jiǎn)單示例：</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>自定義選擇器作為偽類實(shí)現(xiàn)，因此語(yǔ)法看起來(lái)很奇怪 <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>您甚至可以將多個(gè)自定義選擇器組合到單個(gè)選擇器中以實(shí)現(xiàn)更複雜的排列。 </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>選擇器級(jí)別 4 規(guī)範(fàn)引入了一堆新的偽類，但由於大多數(shù)偽類的動(dòng)態(tài)特性，只有幾個(gè)可作為 PostCSS 插件使用。 </p> <h3 id="code-matches-code-偽類"><code>:matches()</code> 偽類</h3> <p><code>postcss-selector-matches</code> 插件實(shí)現(xiàn)了新的 <code>:matches()</code> 偽類。它是一個(gè)函數(shù)類，僅篩選與參數(shù)中選擇器匹配的元素。如果您傳遞多個(gè)選擇器，則元素必須至少匹配其中一個(gè)。簡(jiǎn)而言之：</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> 插件中實(shí)現(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> 插件實(shí)現(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 的庫(kù)中有一些插件旨在使媒體查詢更易於使用。它們是 <code>postcss-custom-media</code> 和 <code>postcss-media-minmax</code>。 </p> <h3 id="自定義媒體">自定義媒體</h3> <p>編寫媒體查詢會(huì)產(chǎn)生與常規(guī)選擇器相同的問題——它們?cè)跇邮奖碇薪?jīng)常重複。可能比普通選擇器更頻繁。幸運(yùn)的是，有一個(gè)類似於自定義選擇器的解決方案。 <code>postcss-custom-media</code> 插件實(shí)現(xiàn)了自定義媒體查詢規(guī)範(fàn)，該規(guī)范增加了將媒體查詢保存到變量中的能力。 </p> <p>語(yǔ)法與自定義選擇器非常相似。這是一個(gè)簡(jiǎn)單的例子：</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)然，您可以一次使用多個(gè)自定義媒體查詢：</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="最小值和最大值語(yǔ)法">最小值和最大值語(yǔ)法</h3> <p>儘管媒體查詢是一件很棒的事情，但最小值和最大值語(yǔ)法受到了社區(qū)的很多批評(píng)。 W3C 通過使用比較運(yùn)算符引入更直觀的語(yǔ)法來(lái)回應(yīng)。 <code>postcss-media-minmax</code> 插件增加了對(duì) <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 的支持。 </p> <p>(文章剩餘部分由於篇幅過長(zhǎng)，已省略，但圖片鏈接保持不變)</p>

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