11個讓你的程式碼整齊的規則

　　寫Web頁面就像我們建造房子一樣，地基牢固，房子才不會倒。同樣的，我們製作Web頁面也一樣，一個好的HTML結構是製作一個美麗的網站的開始，同樣的，良好的CSS只存在同樣良好的HTML中，所以一個乾淨的，語義的HTML的優點很多，那麼平時製作中，我們做到了這一點嗎？我們一起來看一張圖片：

# 　　上圖展示了兩段程式碼，我想大家都只會喜歡第一種，我們先不說其語義，至少他的結構讓我們看上去清爽，而第二種呢？一看就是糟糕的程式碼的程式碼，讓人討厭的程式碼。那麼要怎麼樣才能寫出一個好的程式碼，整潔的程式碼呢？下面我們就從以下十二個面向一起來學習，只要大家以後在寫程式碼的時候能堅持下面的十二個原則，保準你的程式碼品質能上去，而且你寫的程式碼會人見人愛。

　　一、DOCTYPE的宣告

# 如果我們想做好一件事情，首先要知道我們有哪些權利去做，就如「DOCTYPE」的聲明，我們沒有必要去討論是否使用HTML4.01或XHTML1.0或者說現在的HTML5都提供了嚴格版本或過渡版本，這些都能很好的支援我們寫的程式碼：

# 由於我們現在的佈局不需要table佈局也能做出很好的佈局，那麼我們就可以考慮不使用過渡型而使用嚴格型的“DOCTYPE”，為了向後兼容，我建議使用HTML5的聲明模式：

#

　　如果想了解更多這方面的知識，可以點選：

1. # W3C: Recommended DTDs to use in your Web document

2. 
   

3. # Fix Your Site With the Right DOCTYPE!

4. 
   

5. # No more Transitional DOCTYPEs， please

　　二、字元集與編碼字元

# 　　在每個頁面的開始中，我們都在中設定了字元集，我們這裡都是使用「UTF-8」

<meta charset="UTF-8" />

# 　　而且我們在平常寫頁面中時，時常會碰到"&"這樣的符號，那麼我們不應該直接在頁面這樣寫“&”:

# 　　我們應該在程式碼中使用字元編碼來實現，比如說「&」我們在程式碼中應該使用「&」來取代他。

　　如果想了解更多這方面的知識，可以點選：

1. # Wikipedia: UTF-8

2. 
   

3. # A tutorial on character code issues

4. 
   

5. The Extended ASCII table

# 　　三、正確的程式碼縮排

# 在頁面編輯中，程式碼的縮排有沒有正確，他不會影響你網站的任何功能，但如果你沒有一個規範的縮排原則，讓讀你程式碼的人是非常的生氣，所以說正確的程式碼縮排可以增強你的程式碼可讀性。標準程式的縮排應該是一個製表符（或幾個空格），形像一點的我們來看下文章開頭那張圖，或者一起來看下面展示的這張圖，你看後就知道以後自己的程式碼要怎麼樣書寫才讓人看了爽：

# 　　不用說，大家都喜歡下面的那種程式碼吧。這只是一個人的習慣問題，不過建議從開始做好，利人利已。有關於這方面的介紹，大家也可以參考：Clean up your Web pages with HTML TIDY。

　　四、外鏈你的CSS樣式與Javascript腳本

# 頁面中寫入CSS樣式有很多種方法，有些直接將樣式放入頁面的「」中，這將是一個很不好的習慣，因為這樣不僅會搞亂我們的標記，而且這些樣式只適合這一個HTML頁面。所以我們需要將CSS單獨提出，保存在外部，這樣後面的頁面也可以連結到這些樣式，如果你頁面需要修改，我們也只需要修改樣式檔就可以。如下圖所示：

　　上面我們所說的只是樣式，其實javascript腳本也和CSS樣式是同一樣的道理。圖文並說，我最終想表達的意思是「在製作web頁面中，盡量將你的CSS樣式和javascript腳本單獨放在一個文件中，然後透過連結的方式引用這些文件，這樣做的最大好處是，方便你的樣式和腳本的管理與修改。

　　五、正確的標籤巢狀

# 我們在寫HTML時總是需要標籤的層級嵌套來幫我們完成HTML的書寫，但這些HTML的嵌套是有一定的規則的，如果要細說的話，我們可能要用幾個章節來​​描述，那我今天這裡要說的是，我們在寫HTML時不應該犯以下這樣的超級錯誤：

# 上圖的結構我們是常見的，比如說首頁的標題，那麼我們就應該注意了，不能把「

」放在「」標籤中，換句話說，就是不能麼塊元素和在行內元素中。上面只是一個例子，只是希望大家在平常的製作中不該犯這樣的超級錯誤。

　　六、刪除不必要的標籤

# 　　首先我們一起來看一個實例的截圖：

#

# 上圖明顯是一個導航選單的製作，在上圖的實例中：有一個“p#topNav”包住了列表“ul#bigBarNavigation”，而“p”和“ul”列表都是區塊元素，加上「p」此處用來包「ul」根本就沒有起到任何作用。雖然「p」的出現為我們製作web頁面帶來了極大的好處，但我們也沒有必要到處這樣的亂用，不知道大家平時有沒有註意到這樣的細節呢？我是犯這樣的錯誤，如果你也有這樣的經歷，那麼從今天開始，從現在開始，我們一起努力改正這樣的錯誤。

　　有關於如何正確的使用標籤，大家感興趣的話可以點擊：pitis: 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

2. 
   

CSS Tip #2: Structural Naming Convention in CSS

4. 
   

CSS coding: semantic approach in naming convention

6. 
   

CSS Naming Conventions and Coding Style
#

　　八、離開版本的CSS

# 　　我們在設計選單時，有時要求所有選單選項的文字全部大寫，大家平常是不是直接在HTML標籤中就將他們設定成大寫狀態呢？如果是的話，我覺得不好，如果為了將來具有更好的擴展性，我們不應該在HTML就將他們設置為全部大寫，更好的解決方法是透過CSS來實現：

#

#

　　九、定義的類別名稱或ID名稱

#

大家平常製作web頁面時不知道有沒有碰到這樣的問題，就是整站下來，使用了相同的佈局和結構，換句話說，你在頁面的佈局上使用了相同的結構，相同的類名，但是突然你的上級主管說應客戶的需求，有一個頁面的佈局需要邊欄和主內容對換一下。此時你又不想為了改變一下佈局而修改整個頁面的結構，此時有一個很好的解決辦法，就是在你的這個頁面中的「」中定義一個特殊的類別名稱或ID名，這樣來你就可以輕鬆的達到你所要的需求。這樣的使用，不知道大家使用過沒有：

#

# 為「」定義獨特的類別和ID名稱是非常強大的，不僅僅是為了像上面一樣幫你改變佈局，最主要的是有時他能幫你實現頁面中的某一部分達到特殊效果，而又不影響其它頁面的效果。為什麼有這樣的功能，不用我說我想大家都是知道的。因為每個頁面的內容都是「」的後代元素。

　　如果想了解更多這方面的知識，可以點選：

1. # ID Your Body For Greater CSS Control and Specificity

2. 
   

3. Case study: Re-using styles with a body class

# 　　十、驗證你的程式碼

# 人不免會出錯，我們寫程式的時候也是一樣的，你有時候總是會小寫或多寫，比如說忘了關閉你的元素標籤，不記得寫上元素必須的屬性，雖然有一些錯誤不會給你帶來什麼災難性的後果，但也不免會帶給你無法意估的錯誤。所以建議您寫完程式碼的時候去驗證你一下你的程式碼。驗證後的程式碼總是比不驗證的程式碼強：

# 　　為一有效的驗證你的程式碼，我們可以使用相關的工具或瀏覽器的插件來幫助我們完成。如果你的程式碼沒有任何錯誤，W3C驗證工具會在你們面前呈現綠色的文字，這樣讓你是無比的激動人心，因為再次證明了你寫的程式碼經得起W3Ｃ的標準。

　　如果想了解更多這方面的知識，可以點選：

1. # The W3C Markup Validation Service

2. 
   

3. XHTML-CSS Validator

4. 
   

5. # Free Site Validator (checks entire site, not just one page)

　　十一、邏輯順序

# 這是一個很少見的錯誤情況，因為我想大家寫頁面都不會把邏輯順序打亂，換句話說，如果可能的話，讓你的網站具有一個先後邏輯順序是最好的，比如說先寫頁頭，在寫頁體，最後寫頁腳。當然有時也會碰到特殊情況，如何頁腳部分在於我們程式碼的側邊欄以上，這可能是因為它最適合你的網站設計需求，這樣或許是可以理解的，但是如果你有別的方式實現，我們都應該把頁腳是放在一個頁面的最後，然後透過特定的技術讓它達到你的設計需求：

#

# 　　上面我們一起討論了多個如何讓你開始寫一個整齊的HTML程式碼。從一個專案的開始，這一切都是非常容易的，但是如果需要你去修復一個現有的程式碼，那多少都會有一定的難度。上面說這麼多主要是告訴您將要如何學習編寫一個良好的、整潔的HTML程式碼，並且一直堅持這樣的寫作。希望讀完這篇文章後，在你的下一個專案中，能從頭開始，堅持寫一個整齊的HTML程式碼。

　　相關文件：10個最容易犯的HTML標籤錯誤

　　英文來源：12 Principles For Keeping Your Code Clean

以上是11個讓你的程式碼整齊的規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！