11個讓你程式碼整潔的原則
寫Web頁面就像我們建設房子一樣,地基牢固,房子才不會倒。同樣的,我們製作Web頁面也一樣,一個良好的HTML結構是製作一個美麗的網站的開始,同樣的,良好的CSS只存在同樣良好的HTML中,所以一個乾淨的,語義的HTML的優點很多,那麼平時製作中,我們做到了這一點嗎?我們一起來看一張圖片:
上圖展示了兩段程式碼,我想大家都只會喜歡第一種,我們先不說其語義,至少他的結構讓我們看上去清爽,而第二種呢?一看就是糟糕的程式碼的程式碼,讓人討厭的程式碼。那麼要怎麼樣才能寫出一個好的程式碼,整潔的程式碼呢?下面我們就從以下十二個方面一起來學習,只要大家以後在寫程式碼的時候能堅持下面的十二個原則,保準你的程式碼質量能上去,而且你寫的程式碼會人見人愛。
一、DOCTYPE的宣告
如果我們想做好一件事情,首先要知道我們有哪些權利去做,就如“DOCTYPE”的宣告,我們沒有必要去討論是否使用HTML4.01或者XHTML1.0或者說現在的HTML5都提供了嚴格版本或者過渡版本,這些都能很好的支援我們寫的程式碼:
由於我們現在的佈局不需要table佈局也能做出很好的佈局,那麼我們就可以考慮不使用過渡型而使用嚴格型的“DOCTYPE”,為了向後相容,我建議使用HTML5的宣告模式:
<!DOCTYPE HTML>
<html lang="en-US">
如果想了解更多這方面的知識,可以點選:
- W3C: Recommended DTDs to use in your Web document
- Fix Your Site With the Right DOCTYPE!
- No more Transitional DOCTYPEs, please
二、字符集和編碼字元
在每個頁面的開始中,我們都在<head>中設定了字符集,我們這裡都是使用“UTF-8”
<meta charset="UTF-8" />
而且我們在平時寫頁面中時,時常會碰到"&"這樣的符號,那麼我們不應該直接在頁面這樣寫“&”:
我們應該在程式碼中使用字元編碼來實現,比如說“&”我們在程式碼中應該使用“&”來代替他。
如果想了解更多這方面的知識,可以點選:
三、正確的程式碼縮排
在頁面編輯中,程式碼的縮排有沒有正確,他不會影響你網站的任何功能,但要是你沒有一個規範的縮排原則,讓讀你程式碼的人是非常的生氣,所以說正確的程式碼縮排可以增強你的程式碼可讀性。標準程式的縮排應該是一個製表符(或幾個空格),形像一點的我們來看下文章開頭那張圖,或者一起來看下面展示的這張圖,你看後就知道以後自己的程式碼要怎麼樣書寫才讓人看了爽:
不用說,大家都喜歡下面的那種程式碼吧。這只是一個人的習慣問題,不過建議從開始做好,利人利已。有關於這方面的介紹,大家還可以參考:Clean up your Web pages with HTML TIDY。
四、外鏈你的CSS樣式和Javascript指令碼
頁面中寫入CSS樣式有很多種方法,有些直接將樣式放入頁面的“<head>”中,這將是一個很不好的習慣,因為這樣不僅會搞亂我們的標記,而且這些樣式只適合這一個HTML頁面。所以我們需要將CSS單獨提出,儲存在外部,這樣後面的頁面也可以連結到這些樣式,如果你頁面需要修改,我們也只需要修改樣式檔案就可以。正如下圖所示:
上面我們所說的只是樣式,其實javascript指令碼也和CSS樣式是同一樣的道理。圖文並說,我最終想表達的意思是“在製作web頁面中,儘量將你的CSS樣式和javascript指令碼單獨放在一個檔案中,然後通過連結的方式引用這些檔案,這樣做的最大好處是,方便你的樣式和指令碼的管理與修改。”
五、正確的標籤巢狀
我們在寫HTML時總是需要標籤的層級巢狀來幫我們完成HTML的書寫,但這些HTML的巢狀是有一定的規則的,如果要細說的話,我們可能要用幾個章節來描述,那麼我今天這裡要說的是,我們在寫HTML時不應該犯以下這樣的超級錯誤:
上圖的結構我們是常見的,比如說首頁的標題,那麼我們就應該注意了,不能把“<h1>”放在“<a>”標籤中,換句話說,就是不能麼塊元素和在行內元素中。上面只是一個例子,只是希望大家在平時的製作中不應該犯這樣的超級錯誤。
六、刪除不必要的標籤
首先我們一起來看一個例項的截圖:
上圖明顯是一個導航選單的製作,在上圖的例項中:有一個“div#topNav”包住了列表“ul#bigBarNavigation”,而“div”和“ul”列表都是塊元素,加上“div”此處用來包“ul”根本就沒有起到任何作用。雖然“div”的出現給我們製作web頁面帶來了極大的好處,但我們也沒有必要到處這樣的亂用,不知道大家平時有沒有注意這樣的細節呢?我是犯這樣的錯誤,如果你也有過這樣的經歷,那麼從今天開始,從現在開始,我們一起努力來改正這樣的錯誤。
有關於如何正確的使用標籤,大家感興趣的話可以點選:Divitis: what it is, and how to cure it.
七、使用更好的命名
這裡所說的命名就是給你的頁面中相關元素定義類名或者是ID名,很多同學都有這慄的習慣,比如說有一個元素字型是紅色的,給他加上“red”,甚至佈局都寫“left-sidebar”等,但是你有沒有想過,如果這個元素定義了“red”後,過幾天客戶要求使用“藍色”呢?或者又說,那時的“left-sidebar”邊欄此時不想放在左邊了,而是想放在右邊,那麼這樣一來我們前面的命名可以說是一點意義都沒有了,正如下面的一個圖所示:
那麼定義一個好的名就很得要了,不但自己能看懂你的程式碼,而且別人也能輕鬆讀懂你的程式碼,比如說一個好的類名和ID名“mainNav”、“subNav”、“footer”等,他能描述所包含的事情。不好的呢,比如前面所說的。
如果想了解更多這方面的知識,可以點選:
- Standardizing CSS class and id names
- CSS Tip #2: Structural Naming Convention in CSS
- CSS coding: semantic approach in naming convention
- CSS Naming Conventions and Coding Style
八、離開版本的CSS
我們在設計選單時,有時要求所有選單選項的文字全部大寫,大家平時是不是直接在HTML標籤中就將他們設定成大寫狀態呢?如果是的話,我覺得不好,如果為了將來具有更好的擴充套件性,我們不應該在HTML就將他們設定為全部大寫,更好的解決方法是通過CSS來實現:
九、定義<body>的類名或ID名
大家平時製作web頁面時不知道有沒有碰到這樣的問題,就是整站下來,使用了相同的佈局和結構,換句話說,你在頁面的佈局上使用了相同的結構,相同的類名,但是突然你的上級主管說應客戶的需求,有一個頁面的佈局需要邊欄和主內容對換一下。此時你又不想為了改變一下佈局而修改整個頁面的結構,此時有一個很好的解決辦法,就是在你的這個頁面中的“<body>”中定義一個特殊的類名或ID名,這樣來你就可以輕鬆的達到你所要的需求。這樣的使用,不知道大家使用過沒有:
給“<body>”定義獨特的類和ID名稱是非常強大的,不僅僅是為了像上面一樣幫你改變佈局,最主要的是有時他能幫你實現頁面中的某一部分達到特殊效果,而又不影響其它頁面的效果。為什麼有這樣的功能,不用我說我想大家都是知道的。因為每個頁面的內容都是“<body>”的後代元素。
如果想了解更多這方面的知識,可以點選:
十、驗證你的程式碼
人不免會出錯,我們編寫程式碼的時候也是一樣的,你有時候總會小寫或多寫,比如說忘了關閉你的元素標籤,不記得寫上元素必須的屬性,雖然有一些錯誤不會給你帶來什麼災難性的後果,但也不免會給你帶來你無法意估的錯誤。所以建議您寫完程式碼的時候去驗證你一下你的程式碼。驗證後的程式碼總是比不驗證的程式碼強:
為一有效的驗證你的程式碼,我們可以使用相關的工具或者瀏覽器的外掛來幫助我們完成。如果你的程式碼沒有任何錯誤,W3C驗證工具會在你們面前呈現綠色的文字,這樣讓你是無比的激動人心,因為再次證明了你寫的程式碼經得起W3C的標準。
如果想了解更多這方面的知識,可以點選:
- The W3C Markup Validation Service
- XHTML-CSS Validator
- Free Site Validator (checks entire site, not just one page)
十一、邏輯順序
這是一個很少見的錯誤情況,因為我想大家寫頁面都不會把邏輯順序打亂,換句話說,如果可能的話,讓你的網站具有一個先後邏輯順序是最好的,比如說先寫頁頭,在寫頁體,最後寫頁尾。當然有時也會碰到特殊情況,如何頁尾部分在於我們程式碼的邊欄以上,這可能是因為它最適合你的網站設計需求,這樣或許是可以理解的,但是如果你有別的方式實現,我們都應該把頁尾是放在一個頁面的最後,然後在通過特定的技術讓它達到你的設計需求:
上面我們一起討論了多個如何讓你開始寫一個整潔的HTML程式碼。從一個專案的開始,這一切都是非常容易的,但是如果需要你去修復一個現有的程式碼,那多少都會有一定的難度。上面說這麼多主要是告訴您將要如何學習編寫一個良好的、整潔的HTML程式碼,並且一直堅持這樣的編寫。希望讀完這篇文章後,在你的下一個專案中,能從頭開始,堅持寫一個整潔的HTML程式碼。
相關文件:10個最容易犯的HTML標籤錯誤
相關文章
- Web前端:11個讓你程式碼整潔的原則Web前端
- 五個簡單的原則,帶你寫出整潔程式碼
- 如何讓你的程式碼整潔漂亮
- (譯)保持你的程式碼整潔
- 整潔程式碼的4個提示
- 程式碼潔癖系列(八):迭代的原則
- 程式碼整潔之道的 7 個方法
- 6 個可以讓程式碼變得更整潔的 Android 庫Android
- [譯] 編寫整潔 CSS 程式碼的黃金法則CSS
- 程式碼整潔之道--讀書筆記(11)筆記
- 架構整潔之道二(設計原則)架構
- 程式碼整潔之道
- 整潔的 Table View 程式碼View
- 整潔的程式碼VS卓越的程式碼
- 程式碼整潔之所以重要的七個理由
- JavaScript 程式碼整潔之道JavaScript
- Typescript 程式碼整潔之道TypeScript
- 聊聊程式碼整潔之道
- 如何讓你的 Linux 系統乾淨整潔Linux
- 【JS】裝飾器讓你的程式碼更簡潔JS
- 如何寫出整潔的程式碼
- 程式碼整潔 vs 程式碼骯髒
- [翻譯] 讓你的程式碼更簡短,更整潔,更易讀的ES6小技巧
- 程式碼整潔之道 clean code
- 重構 - 程式碼整潔之道
- 程式碼整潔之道 – 有意義的命名
- 【第1163期】React 整潔程式碼最佳實踐React
- Go Interface 的優雅使用,讓程式碼更整潔更容易測試Go
- Bartender 4: 讓你的 Mac 選單欄更整潔更高效Mac
- 讓你的Mac更加乾淨整潔——App Cleaner & Uninstaller ProMacAPP
- 6個小技巧教你編寫乾淨整潔的程式碼
- 程式碼整潔之道讀書記
- React 整潔程式碼最佳實踐React
- 什麼是整潔的程式碼(Clean Code)?
- 使用 Macro 讓你的程式碼更簡潔,更具有可讀性Mac
- Kotlin-for-Android : 讓你的Android程式碼更簡潔KotlinAndroid
- 優秀程式設計師眼中的整潔程式碼程式設計師
- 閱讀《程式碼整潔之道》總結