首頁 > 開發者 > CSS

HTML&CSS編碼規範

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

General Summary（總體概述）

總體原則

      符合w3c通用網頁標準。

      結構清晰，嵌套正確，嵌套深度適當。

      代碼精鍊。

      注釋清晰，代碼可讀性高。

      風格統一。

 

1.1              基本命名風格

本文檔的命名規範會僅使用以下命名風格。

  • Camel風格

         這種風格除了第一個單詞的首字母,其他單詞都應大寫首字母。Ex: backColor  

1.2              大小寫敏感

  • 不要出現兩個只用大小寫區分的Class。
  • 不要出現兩個只用大小寫區分的ID。 

Naming Conventions and Style（命名規範和代碼風格）

1.3              所有的Class及ID均採用 Pascal 風格

<ul class=”mainNav”></ul>

<div id=”footerLink”></div>

1.4              使用有意義的Class及ID

<!-- Good Example -->

<p class=”sidebar”></p>

<div id=”container”></div>

 

<!--Not Good Example -->

<p class=”boxA”></p>

<div id=”boxB”></p>

 

1.5              所有的樣式控制盡量使用Class，ID用於Javascript對DOM結構的控制

  • 可以防止因優先順序的問題導致CSS代碼量加大
  • 同一個Class可應用於多個標籤，但同一個ID只能用於一個標籤

1.6              所有CSS代碼盡量單獨封裝在獨立的CSS檔案中，檔案命名應用有意義的名字，例如layout.css編寫頁面配置方面的CSS代碼。

  • 盡量不要出現直接在HTML標籤中書寫CSS代碼的情況。
  • 在<head>標籤中可使用<style></style>針對本頁面中特定元素的樣式控制碼

1.7              CSS代碼每行一個屬性

  • 每行一個屬性的代碼風格更利於維護，注釋更方便
  • 在使用Hack進行瀏覽器安全色性處理時更清晰

/* Example */

.mainNav {

width: 200px;

height: 200px;

background: #f00 url(bg.jpg) no-repeat left top; /* 背景顏色及背景圖片 */

}

 
  • 不建議採用下面的代碼形式，哪怕是只有一條屬性

/* Example */

.mainNav {

width: 200px; height: 200px; background: #f00 url(bg.jpg) no-repeat left top; /* 背景顏色及背景圖片 */

}

 

 

1.8              CSS代碼中應遵循從外到內，從上到下，從左至右的原則

  • 先寫外圍架構的，再寫內部元素的。
  • 先寫網頁中視覺上出現在頁面上面的元素CSS代碼，再寫下面的。
  • 先寫網頁中視覺上出現在頁面左邊的元素CSS代碼，再寫右邊的。

<!-- Example -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> </title>

<style>

.header {

}

.container {

}

.container .sidebar {

}

.container .main {

}

.footer {

}

</style>

</head>

<body>

<div class=”header”>頭部</header>

<div class=”container”>

<div class=”sidebar”>側邊欄</div>

<div class=”main”>主體地區</div>

</div>

<div class=”footer”>底部</div>

</body>

</html>

 

 

1.9              代碼縮寫

  • 對於padding，margin，border等屬性應採用縮寫方式

/* Good Example */

margin: 10px 5px 15px;

padding: 1px 2px;

border-width: 1px;

 

/* Not Good Example */

margin: 10px 5px 15px 5px;

padding: 1px 2px 1px 2px;

border-width: 1px 1px 1px 1px;

 

 

1.10        所有CSS代碼盡量單獨封裝在獨立的CSS檔案中，檔案命名應用有意義的名字，例如layout.css編寫頁面配置方面的CSS代碼。

  • 在檔案開始處給出適當的注釋

/* -------

檔案名稱：layout.css

作用：頁面主體布局

建立者：

建立日期：

最後更新：

最後更新時間：

------- */

 

 

 

Indentation and Spacing(縮排和空格)

1.11        使用TAB縮排，不要使用Spaces. 定義TAB值為4

1.12        注釋和代碼要在同一列，使用同樣的縮排格式

  • 對於某一屬性的單獨注釋，直接寫在同一行內。

/* Good Example */

/* Header */

.header {

width: 200px;

min-height: 100px; /* 針對IE7中設定最小高度 */

}

1.13        選取器與開始大括弧({)之間應保持而且僅有一個空格

1.14        結束大括弧(｝)應該放在單獨的一行。

1.15        用一到兩個空行來分割不同的頁面模組CSS程式碼片段

/* Good Example */

.header {

width: 200px;

height: 100px;

}

.header .mainNav {

margin: 5px 2px;

}

 

 

.container {

}

.container .sidebar {

}

 

.container .main{

}

 

 

.footer {

}

 

/* Not Good Example */

.header {

width: 200px;

height: 100px;

}

.header .mainNav {

margin: 5px 2px;

}

.container {

}

.container .sidebar {

}

.container .main{

}

.footer {

}

 

 

Good Programming practices（編碼最佳實務）

1.16        CSS書寫順序應大體遵循以下原則（從上到下依次編寫）

  • 布局類clear、float、position、display
  • 容器控制 width、height、padding、margin、border
  • 背景 background
  • 文字控制 font、color、text-align、vertical-align
  • 其他屬性

 

1.17        選取器名稱應該可以直接體現元素意義。不要使用無意義的名字。

/* Good Example */

/* 主導航條 */

.mainNav {

}

/* 側邊欄菜單 */

.sideMenu {

}

 

/* Not Good Example */

.Menu1 {

}

.Menu2 {

}

1.18        選擇正確的標籤

  • 不要一味的追求和使用DIV標籤
  • 不要完全拋棄Table標籤，在需要對資料進行排列顯示時，Table是首選
  • 要在恰當的地方正確使用<dl>標籤，而不要用冗繁的div、p等代替
  • 合理安排<h1>到<h6>標籤，有利於SEO，一個網頁中不要出現超過2個<h1>
  • 盡量不再使用<font>標籤

1.19        同一標籤嵌套深度盡量不要超過三層

  • 比較常見的錯誤時使用嵌套超過三層的DIV標籤，應用其他可代替的標籤進行編寫

1.20        不要使用多餘的代碼

  • 在保證達到效果的同時，代碼應越少越好。

/* Good Example */

span {

float: left;

}

/* Not Good Example */

span {

float: left;

display: block;

}

/* 雖然span本身為inline元素，但經過float:left後已經自動轉為了block元素，所以無需添加display:block */

 

1.21        及時清除浮動並注意方法

  • 在對元素進行浮動後，應及時清除浮動。如果採用空標籤清除浮動法，空標籤應緊跟浮動元素之後，而不是浮動元素的父元素之後。

 

1.22        將常用的class放在一個單獨的檔案中

  • 將常用的浮動、清除浮動、字型顏色等class單獨寫在一個公用檔案中，可取名common.css

 

Others（其它）

1.23        關於CSS排錯

  • 當出現CSS錯誤時，建議給出錯的標籤設定背景顏色或邊框，以便更快的找出錯誤並更正。
  • CSS排錯方法應首先檢查HTML代碼中的class屬性與CSS代碼中的選取器是否一致，避免因漏寫字母或錯寫字母而出錯。
  • 出現錯位時應首先考慮是否掉入了IE6的各種“CSS陷阱”中，例如Double Margin。

 

 

Resource 資源   

1.24         http://www.w3.org/

  • W3C官方網站

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
convert html to amp html html css udemy udemy html css javascript html and css book html and css duckett search box html css html css editor
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More