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

目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設計、青云譜網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

DRY原則

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

我們來看一個例子，下面這段代碼相當糟糕，多次重復了 gray這個值：

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

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

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

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

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

是時候放下計算器了

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

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

從設計的角度來看，格子間距和容器邊緣寬度都是 16px，這一點是最重要的。我們的目標是直觀地反饋出設計意圖，直接得到結果對我們來說沒有實現(xiàn)以外的意義。而且分開設置這兩個值也有維護成本。

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

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

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

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

可讀的變化

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

讓我們來看看一個用 flexbox實現(xiàn)的響應式網(wǎng)格：

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

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

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

注意：上面某些用法對于 CSS預處理器來說可能太復雜了，在實際使用中可能不會按照預期生成代碼。

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

通過 CSS Class保證 CSS和 JavaScript的獨立性

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

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

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

在 CSS和 JavaScript中傳值

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

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

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

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

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

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

用自定義屬性作為 JavaScript和 CSS之間的橋梁。這是個簡單又容易維護的解決方案！

一個變量，多處使用

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

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

HTML結構如下：

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

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

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

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

意義

減少對 CSS class的操作，讓 CSS自定義屬性幫助你構建出一個 JS和 CSS解耦的頁面。

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

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

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

網(wǎng)頁題目：CSS簡化代碼的小技巧有哪些
文章轉(zhuǎn)載：http://www.chinadenli.net/article26/ipphjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設、Google、網(wǎng)站設計公司、網(wǎng)站導航、自適應網(wǎng)站、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)