一个寝室3个攻一受全h_97国产福利_在线中文字幕理伦电影_www.youjizz.com国产

首頁?>?知識?資訊?>?2019年如何重構CSS代碼?>?正文

2019年如何重構CSS代碼

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

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

網站建設


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


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


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

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

網站建設


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


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


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

更多的重構CSS信息,您可以聯系北京網站建設公司,我們將為您提供專業的網站開發服務。

  • 相關推薦
  • 大家在看
客戶服務
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354