CSS簡(jiǎn)化代碼的小技巧有哪些

這篇文章給大家分享的是有關(guān)CSS簡(jiǎn)化代碼的小技巧有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。

注意：為敘述簡(jiǎn)潔，自定義屬性的兼容方案將不再在下文中贅述，但在實(shí)際項(xiàng)目中大家別忘了加上，像下面這樣：

DRY 原則

堅(jiān)守 DRY 原則，你不僅能夠逃脫不斷重復(fù)寫值的噩夢(mèng)，當(dāng)調(diào)整屬性值要做的搜索、替換和調(diào)試等重復(fù)的工作都能得以緩解。也就是：DRY 原則能降低代碼維護(hù)的成本。

我們來(lái)看一個(gè)例子，下面這段代碼相當(dāng)糟糕，多次重復(fù)了 gray 這個(gè)值：

如果你希望更改主題色的話，需要調(diào)整三個(gè)地方的屬性值，還要注意不要錯(cuò)改了 .caption 的 color 值。

那么 CSS 變量能派上什么用場(chǎng)呢？一處定義，處處使用！在引入 --theme-color 之后：

用 CSS 自定義屬性作為主題色的變量后，一旦要調(diào)整，只需要改動(dòng)一個(gè)地方就能全局生效。不止如此，--theme-color 這個(gè)變量名已經(jīng)帶上了語(yǔ)義，之前只是用 gray 的時(shí)候，我們并不知道當(dāng)主題色發(fā)生變化的時(shí)候，特定元素的字體顏色是否也需要隨之改變。使用該變量后，就沒有了這樣的困擾。

最好也用自定義屬性控制標(biāo)題的字色 (caption text)：

旅途才剛剛開始，讓我們繼續(xù)吧！

是時(shí)候放下計(jì)算器了

在 CSS 自定義屬性：基礎(chǔ)篇中，我們提到了自定義屬性和 calc() 結(jié)合實(shí)現(xiàn)運(yùn)行時(shí)的計(jì)算。在這個(gè)前提下，想想看下面這個(gè)網(wǎng)格布局要如何實(shí)現(xiàn)呢：

熟悉 CSS 盒模型的你應(yīng)該很熟悉上面的代碼吧：16px 寬的邊距，.image 間有 16px 寬的間隔。但從 CSS 角度來(lái)看，這段代碼還不夠直觀足以代表最終的網(wǎng)格效果，我們真正關(guān)心的東西也不能從代碼中凸顯出來(lái)。

從設(shè)計(jì)的角度來(lái)看，格子間距和容器邊緣寬度都是 16px，這一點(diǎn)是最重要的。我們的目標(biāo)是直觀地反饋出設(shè)計(jì)意圖，直接得到結(jié)果對(duì)我們來(lái)說沒有實(shí)現(xiàn)以外的意義。而且分開設(shè)置這兩個(gè)值也有維護(hù)成本。

如果將自定義屬性和 calc() 結(jié)合，代碼就會(huì)變得更加直觀：

現(xiàn)在，我們可以直接看到計(jì)算過程，如果想要調(diào)整數(shù)值也很方便。甚至，你還能將變量變成頁(yè)面級(jí)的，將 --page-grid 的值作為其他元素的基礎(chǔ)值：

在上面的例子中，我們需要在 calc() 中做一些中間計(jì)算，讓最終代碼更清晰。

注意： Safari/WebKit 目前在 calc() 中的計(jì)算還有一些問題，這些問題在 Safari 10.1 中有望得到解決。

可讀的變化

到目前，我們都關(guān)注在 CSS 自定義屬性的一處定義處處使用，但它的威力不止如此，如果你想在特定的情況下改變變量值，也是可以做到的。

讓我們來(lái)看看一個(gè)用 flexbox 實(shí)現(xiàn)的響應(yīng)式網(wǎng)格：

上面這段代碼實(shí)現(xiàn)的是一組響應(yīng)式布局，但乍看上去，一頭霧水。默認(rèn)情況下，圖片排成一列，也就是一行只顯示一張圖片；如果屏幕尺寸是600px、1024px…相應(yīng)的，圖片排列變成了三列或者是六列。和上一段代碼例子中一樣，此處容器邊緣寬度和網(wǎng)格間距都是16px。

calc() 中的計(jì)算內(nèi)容比較復(fù)雜，我們需要加上注釋解釋。但如果用上了自定義變量，情況就不同了：

可以看出，所有的計(jì)算都是在一處完成的。在媒體查詢中需要改變的只有自定義屬性的值。現(xiàn)在即使是剛看到這段代碼的人，也能很快讀懂它。而且不再需要不斷使用 calc() 做各種計(jì)算了，也規(guī)避了因?yàn)榇蝈e(cuò)而造成的問題。

注意：上面某些用法對(duì)于 CSS 預(yù)處理器來(lái)說可能太復(fù)雜了，在實(shí)際使用中可能不會(huì)按照預(yù)期生成代碼。

CSS 自定義屬性在存值取值方面有很大作用。接下來(lái)我們將探索自定義屬性作為 CSS 和 JavaScript 間橋梁的使用。接下來(lái)，讓我們看看 CSS 自定義屬性和 JS 結(jié)合能發(fā)揮的作用吧！

通過 CSS Class 保證 CSS 和 JavaScript 的獨(dú)立性

在大部分情況下，我們都希望 CSS 和 JavaScript 可以解耦。最簡(jiǎn)單并利于維護(hù)的方式就是使用語(yǔ)義化良好的 CSS class。通過 JS 動(dòng)態(tài)添加或移除 class，改變視覺效果：

這樣做就不再需要通過 JS 添加行內(nèi)樣式，它只負(fù)責(zé)觸發(fā)視覺的變化，真正改變視覺的是 CSS。反之，如果需要更改觸發(fā)事件但依舊使用同一個(gè)視覺變化效果，只用修改 JS 代碼。

注意：建議將通過 JS 控制的 CSS class 和默認(rèn)的 class 區(qū)分開來(lái)。比如加上 js- 的前綴（見上段代碼片段）就是個(gè)不錯(cuò)的選擇。

在 CSS 和 JavaScript 中傳值

class 的添加或移除在非黑即白的場(chǎng)景下很合適，但往往情況很復(fù)雜，可能還需要?jiǎng)討B(tài)地傳入一些值。比如，在和用戶輸入有關(guān)的場(chǎng)景中，根據(jù)用戶的輸入決定某些視覺展現(xiàn)。

假設(shè)現(xiàn)在有一個(gè)容器元素，我們希望當(dāng)用戶點(diǎn)擊它的時(shí)候可以移動(dòng)到最后一位。如果在該容器中設(shè)置一個(gè)輔助性元素，我們可以這樣移動(dòng)它：

雖然上面這段代碼能實(shí)現(xiàn)我們想要的效果，但 JS 不僅需要直接操作那個(gè)輔助性元素（理想情況下，它甚至不應(yīng)該知道這個(gè)元素的存在），還需要通過內(nèi)聯(lián)樣式修改這個(gè)元素的 transform 屬性值。

直到現(xiàn)在，這個(gè)問題還是沒有完美解決的方式。但有了自定義屬性之后，我們至少可以將這個(gè)解決方法抽象化一些了：

現(xiàn)在又回到了用 CSS 處理視覺表現(xiàn)上了，不再需要通過 JS 更改內(nèi)聯(lián)樣式。事實(shí)上，連輔助元素都能用 ::after 偽元素替代：

提示： 直接通過 JS 修改偽元素（比如 ::after）的樣式不大容易，可以考慮在父元素上使

用自定義屬性作為 JavaScript 和 CSS 之間的橋梁。這是個(gè)簡(jiǎn)單又容易維護(hù)的解決方案！

一個(gè)變量，多處使用

邏輯上的變化可能伴隨著大面積視覺表現(xiàn)上的更改，典型的例子就是選擇主題，更換主題時(shí)可能引起大部分元素視覺上的變化。

以音樂播放器為例，如果你希望界面顏色隨著當(dāng)前收聽專輯的更改而變化，從前你需要維護(hù)一系列會(huì)出現(xiàn)顏色變化的元素以及屬性，需要的時(shí)候依次更改：

HTML 結(jié)構(gòu)如下：

不管怎么樣，都要常常更新跟隨主題變化的元素和屬性，所以這個(gè)方法會(huì)讓后續(xù)維護(hù)變得艱難。

還有一種解決方式是引入一個(gè)新樣式，它將會(huì)覆蓋舊樣式。這個(gè)方法相對(duì)好一些（雖然比較 hacky），但還是避免不了要覆蓋一系列的樣式，這其中依然有著維護(hù)成本：

但通過自定義屬性，問題能得到不小的簡(jiǎn)化：只要改變位于 DOM 結(jié)構(gòu)中最高點(diǎn)的元素，接著讓瀏覽器去改變?cè)摴?jié)點(diǎn)之下的節(jié)點(diǎn)：

JavaScript 根本不需要知道哪些元素哪些屬性會(huì)發(fā)生變化，也不需要開發(fā)者維護(hù)受影響的元素列表。使用自定義元素，明顯比前文中的方案都好！

意義

減少對(duì) CSS class 的操作，讓 CSS 自定義屬性幫助你構(gòu)建出一個(gè) JS 和 CSS 解耦的頁(yè)面。

CSS 自定義屬性能讓運(yùn)行時(shí)的任何更改都將局限在一組明確定義的實(shí)體中，這組實(shí)體就是為了交互而存在的。這樣，也降低了開發(fā)者定位 bug 的難度，還能讓樣式和行為分離。

既然樣式和邏輯獨(dú)立于彼此，樣式只有 CSS 來(lái)實(shí)現(xiàn)，邏輯也只由 JS 來(lái)完成，維護(hù)也變得更加容易。

感謝各位的閱讀！關(guān)于“CSS簡(jiǎn)化代碼的小技巧有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！