首頁?>?知識?資訊?>?2019年如何重構(gòu)CSS代碼?>?正文

2019年如何重構(gòu)CSS代碼

2019/8/19 0:00:00 · 稿源：傳誠信

編寫好的代碼不僅僅是在網(wǎng)站設(shè)計上獲得所需的結(jié)果。好的代碼應(yīng)該盡可能高效和簡潔。雖然通常有許多方法可以獲得相同的結(jié)果，但最簡潔和最簡單的方法是，除了少數(shù)例外，它是理想的選擇。
編寫好的，干凈的代碼有兩個主要的好處。首先，它可以顯著提高網(wǎng)站的速度和性能。您的文件越小（發(fā)送的外部請求越少），您的網(wǎng)站在瀏覽器中加載所需的時間就越少。其次，編寫好的代碼具有使其更易于維護的寶貴好處。無論您是自己編寫項目還是與其他開發(fā)人員編寫代碼，代碼越精益（理想情況下都有良好的文檔），對于任何不得不重新訪問代碼庫的人來說，這都是一件令人頭疼的問題。
編寫優(yōu)秀代碼的最佳實踐通常適用于所有編程語言，盡管這篇文章將專門用于改進您網(wǎng)站上的CSS。

網(wǎng)站建設(shè)


刪除不必要的HTTP請求
在網(wǎng)站設(shè)計的過程中，您最終可能會從HTML文檔或CSS文件中鏈接到多個外部文件和依賴項。您可以嘗試托管在外部CDN上的多種不同字體或CSS框架。這些依賴項中的每一個都表示您的站點每次在瀏覽器中加載時發(fā)出的HTTP請求。這給網(wǎng)站加載時間帶來了很大壓力，所有這些請求都很快就會增加。
如果您向項目添加了一堆外部字體文件，但當前只在CSS文件中引用了1或2，請從HTML文檔中刪除任何這些鏈接的依賴項。
您只使用CSS框架只需幾行代碼嗎？考慮將這些行復(fù)制并粘貼到主.css樣式表中，并刪除指向原始CSS框架代碼的鏈接。


簡化和整合CSS規(guī)則
在編寫CSS時，您最終可能會為各種不同的元素和選擇器重復(fù)編寫相同的規(guī)則。在計算機編程中，經(jīng)常重復(fù)的“干”概念（不要重復(fù)自己）也適用于CSS。只要您發(fā)現(xiàn)自己為不同的選擇器編寫相同的CSS規(guī)則，就可以找到合并它們的方法。


重新獲取您的ID和類值
將樣式表示的一個方面指定為您的類或ID值通常很誘人，但這遠非理想。例如，對于錯誤消息，使用它red作為類或ID值通常似乎是有意義的，如下所示：

這是一條錯誤消息
?但是如果你改變這個類的顏色或其他樣式會發(fā)生什么？該課程將不再與其內(nèi)容或演示文稿直接相關(guān)，并且很可能會引起混淆。在這種情況下更好的選擇是使用一個解釋其功能的類值，而不是它的風格表示：
這是一條錯誤消息
使用描述該元素的內(nèi)容或功能的類和ID值總是一個好主意，而不是任何樣式描述。在創(chuàng)建網(wǎng)站的過程中，樣式可以多次更改，但使用函數(shù)描述符將使代碼更易讀，更易于維護。

網(wǎng)站建設(shè)


重新選擇您的選擇器
選擇元素通常有許多不同的方法，但通常比其他方式更有效。雖然可以將選擇器嵌套在彼此內(nèi)部以便到達特定元素，但如果您發(fā)現(xiàn)自己必須進入太多級別，則最好重新評估類或ID值是否會更好地運行。


縮小CSS文件
一旦您的CSS文件完全準備好生產(chǎn)并部署到實時服務(wù)器，最好將它們縮小以獲得最佳性能。縮小器將從源代碼中刪除所有空白區(qū)域，從而顯著減小文件大小。由于源代碼不依賴于空白區(qū)域來實現(xiàn)其功能（僅具有可讀性），因此不會對網(wǎng)站的運行方式產(chǎn)生負面影響。


整合您的CSS文件
雖然在開發(fā)階段保持CSS模塊化有一個很好的論據(jù)（例如將布局規(guī)則保存在一個CSS文件中，另一個CSS文件中的顏色選項等） - 最終你需要將所有這些CSS規(guī)則合并到一個文件中最棒的表演。

更多的重構(gòu)CSS信息，您可以聯(lián)系北京網(wǎng)站建設(shè)公司，我們將為您提供專業(yè)的網(wǎng)站開發(fā)服務(wù)。

  • 相關(guān)推薦
  • 大家在看
關(guān)鍵詞：
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354