在此次團隊項目中，我一直都是處於學習狀態，能夠寫出一些稍微有點水平的前端頁面，但是還是很菜，在此次的前端頁面中，有一個地方我覺得特別要注意，就是前端代碼的規范編寫，規范編寫代碼對每一個程序員都十分重要，在這里，我將自己收集到的一些關於html和css的編寫規范列在下面：
在任何一個項目或者系統開發之前都需要定制一個開發約定和規則，這樣有利於項目的整體風格統一、代碼維護和擴展。由於Web項目開發的分散性、獨立性、整合的交互性等，所以定制一套完整的約定和規則顯得尤為重要。
第一節 CSS樣式文件的命名
建立樣式表文件時，分類編寫樣式到下列樣式表文件中，並統一放在【CSS】文件夾里：
| main.css |
文字樣式 |
font.css |
|
| 表格 |
table.css |
主題 |
themes.css |
| 打印 |
print.css |
補丁 |
mend.css |
在項目初期，會把不同類別的樣式放於不同的CSS文件，是為了CSS編寫和調試的方便，在項目后期會為了網站性能上的考慮會整合不同的CSS文件到一個CSS文件，必要時可壓縮。
第二節 CSS選擇符的命名
所有選擇符必須有小寫英文字母或“_”下划線組成，樣式名必須是表示該樣式的大概含義（禁止出現如Div1、div2、Style1……），參考后面的“樣式命名參考”。對CSS選擇器的使用只允許派生選擇器、類選擇器和屬性選擇器，以及它們的組合使用，嚴禁使用ID選擇器（ID是用於JavaScript的編寫）。
如：li span {…}td.fancy {…}input[type="text"]{…}
當定義的樣式名比較復雜時用下划線把層次分開，比如：dcrm_logo{ …} dcrm_logo_ico{…}
第三節 圖片的命名與書寫
圖片的命名原則小寫英文字母名稱放在頭尾兩部分，用“_”下划線隔開，頭部表示此圖片的大類性質例如廣告、標志、菜單、按鈕等等；尾部表示圖片的概念。設計人員在PS中保存圖片時，請使用“文件”à“存儲為Web和設備所用的格式”。
| 廣告 |
banner |
標志 |
logo |
| 鏈接的小圖片 |
button |
裝飾圖 |
pic |
| 標題的圖片 |
title |
||
| banner_sohu.png 、banner_sina.png、 menu_about_us.png、menu_job.png、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg |
第四節 CSS注釋書寫規范
4.1 提示和標簽信息注釋
這是注釋最常用的途徑，可以為自己或其他開發人員留下提示信息可以避免后期引起的不必要的困惑和麻煩。這種應用簡潔性最為重要。
| .search{ border:1px solid #fff; /*Border Color*/ } |
注意：注釋內容和前面樣式語句間有3個空格，后面1個空格
4.2 修改樣式注釋（時間和相關人員）
| /*__Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: hour --------------------------------------------------------------------------------------------*/ |
4.3 文檔結構
| /*__Header --------------------------------------------------------------------------------------------*/ .search{ border:1px solid #fff; /*Border Color*/ color:#333; /*Color*/} /*__Menu --------------------------------------------------------------------------------------------*/ .menul_ul{ border:1px solid #fff; /*Border Color*/} |
注意：相對獨立的2段內容之間空1行。
第五節 CSS布局編碼標准和建議
5.1 建立樣式表索引
樣式表頭部索引定義可以幫助你和其它人弄清楚該樣式表文件的相關信息，它一般是一段格式化的CSS注釋文本寫在 main.css中。給出該CSS文件作者的相關信息；定義站點的布局，記錄文件版本號（利於多作者協作及將來更新）
| /*--------------------------------------------------------------------------------------------- *Filename: main.css *Description: Global CSS *Version: 1.0.0(2009-12-28)YYYY-MM-DD *Website: http://www.testsoft.com ==STRUCTURE:=================================== == ==== ===== *Page width: 980px *Number of columns: 2 --------------------------------------------------------------------------------------------*/ |
5.2 命名錨點 的使用
命名錨點是用來規划整個CSS文件結構的（就好像書簽一樣），從而使整個CSS文件獲得良好的組織。命名錨點一般也是書寫在樣式表頭部的索引注釋中。CSS本身沒有內部的錨點系統，所以我一般采用下面的小技巧來完成。在頭部索引拷貝你想找到的錨點，並在整個文檔中查找，從而獲取該CSS節。
| *==STRUCTURE:=============================================== $__header Header Definitions $__menu Global Site $__content Everything within the content -----------------------------------------------------------------------------------------------*/ /*__header -----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...} /*__menu ----------------------------------------------------------------------------------------------*/ {...Header CSS Definitions...} |
5.3 建立良好的CSS編碼順序
最后定義的 CSS 樣式將會覆蓋在其之前定義的所有已經存在、或與之沖突的樣式，比如下面這個例子：
| p { color: red; background: yellow;} p { color: green;} |
以上的段落最終將呈現綠色的字體，並帶有黃色的背景，這是因為最后定義的 color:green 將之前定義的 red 覆蓋掉了，至於黃色背景為何沒有消失，那是因為第二個 p 的定義中並沒有與之沖突的定義，因此它還是有效的。
5.4 合適的縮寫
在CSS中經常會利用縮寫把多個相同類型的屬性定義指定為一個。CSS縮寫會使CSS文檔更加干凈、簡潔；縮寫語法參考相關章節。
5.5 CSS圖像拼合(即CSS Sprites技術)
CSS Sprites技術：將用到的所有小圖片（圖標）合並為一張圖片，使用css背景屬性，來控制圖片的顯示位置和方式。CSS Sprites技術的應用可以大大減少HTTP請求的次數，減輕服務器壓力，同時縮短了懸停加載圖片所需要的時間延遲，使效果更流暢，不會停頓。
5.6 CSS組合和嵌套
CSS組合
你不必重復有相同屬性的多個選擇符，你只要用英文逗號（,）隔開選擇符就可以了。
| h2 { color: red; } .w3cbbs { color: red; } .w3cbbs_52css { color: red; } 則你可以這樣寫h2,.w3cbbs,.w3cbbs_52css { color: red; } |
CSS嵌套
CSS結構好的話，沒有必要使用過多的類或者標識選擇符。這是因為你可以指定在選擇符內的選擇符。
| .top { padding: 1em;} .top h1 { color: #ff0; } .top p { color: red; font-weight: bold; } |
第六節 常用CSS選擇符命名參考
| 導航 |
nav |
頁頭 |
header |
| 主導航 |
mainnav |
頁面主體 |
main |
| 頂導航 |
topnav |
內容 |
content |
| 子導航 |
subnav |
頁腳 |
footer |
| 菜單 |
menu |
版權 |
copyright |
| 子菜單 |
submenu |
登陸 |
login |
| 標志 |
logo |
側欄 |
sidebar |
| 廣告 |
banner |
搜索 |
search |
| 滾動 |
scroll |
標簽頁 |
tab |
| 小技巧 |
tips |
合作伙伴 |
partner |
| 加入 |
joinus |
標題 |
title |
| 注冊 |
regsiter |
指南 |
gUIld |
| 新聞 |
news |
下載 |
download |
| 按鈕 |
button |
狀態 |
status |
| 服務 |
service |
投票 |
vote |
| 注釋 |
note |
友情鏈接 |
friendlink |
| 提示信息 |
msg |
注意：命名方式使用“類別_功能”的方式（.bar_news{} .bar_product{}）。
第七節 DIV+CSS頁面的布局
Table布局由於代碼冗余已經過時，所以HTML頁面普遍采用代碼簡潔Div+CSS的布局，HTML頁面大體可分為top、main和bottom，在main中又可以為left和right，這些CSS的名必須是有意義的名字。如下面代碼：
| <body> <div class="body"> <div class="top"> </div> <div class="main"> <div class="left"> </div> <div class="right"> </div> </div> <div class="bottom"> </div> </div> </body> |
目前table主要是用來展現數據表，反正在布局中盡量少用table。
第八節 HTML代碼書寫規范
頁面的HTML代碼書寫必須符合XHTML規范，XHTML 可以被所有的支持 XML 的設備讀取，同時在其余的瀏覽器升級至支持 XML 之前，XHTML 使我們有能力編寫出擁有良好結構的文檔，這些文檔可以很好地工作於所有的瀏覽器，並且可以向后兼容。
XHTML與HTML的不同：
1. XHTML 元素必須被正確地嵌套。
2. XHTML 元素必須被關閉。
3. 標簽名必須用小寫字母。
4. XHTML 文檔必須擁有根元素。
對於第1點：最有可能發生錯誤是在與<table>標簽的結合，<table>的直接子元素只能為：<thead>、<tbody>、<tfoot>和<tr>，而 <thead>、<tbody>和<tfoot>的直接子元素只能為：<tr>，而<tr>的直接子元素只能為<td>和<th>，在<td>和<th>才可以放其它標簽。此外相類似的標簽有：<dl>、<ul>、<ol>、<select>…。
某些標簽不推薦使用，如：<b><strong><i><em> <strong> <dfn> <code> <samp> <kbd><var> <cite>……，因為這些標簽有些是可以用CSS去統一控制，還有一些是不常使用的；某些標簽是有特殊意義的，如：<h1>…<h6>，這些標簽是專門用於內容標題的，本人也希望只允許使用<h1>…<h6>來表示內容標題。
在編寫HTML代碼時請注意縮進，在VS中按Ctrl+E+D可格式化文本。
第九節 網站基礎CSS的定義
網站CSS必須得有個統一的架構，復用CSS，盡量減少重復CSS的定義。基礎CSS就是那些常用的CSS定義，如：
| .clear { clear: both; } .bold { font-weight: bold; } .left { text-align: left; } .error { color: Red; } .succeed { color: Green; } .center { text-align: center; } .fleft { float:left; } .fright { float:right; } .left15 { margin-left: 15px; } .radius { border-radius: 5px; } |
CSS元素選擇器可以對同一標簽進行統一的樣式定義，有些標簽應該使用元素CSS定義，如：
| body { font-size: 12px; font-family: Arial; margin: 0; padding: 0; color: #403f3f; background:url('../images/page_top.png') repeat-x top #d1d2d2; } a, a:link { color: #2a5685; text-decoration: none; line-height: normal; } a:hover { color: #E0303A; text-decoration: none; cursor: pointer; } ul { margin: 0px; padding: 0px; } hr { height: 1px; border: none; border-bottom: #dcdddd 1px solid; } h1, h2 { font-size: 1.5em; color: #000; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } |
第十節 CSS調試心得
目前的瀏覽器基本上都有客戶端調試工具，所以當對頁面進行設計或調試時，請盡量使用此類工具，而不是改源文件，然后再刷新頁面，使用客戶端工具可及時增、刪、改HTML元素所對應的CSS，還可以得到HTML元素所在布局的具體數值，如：
在項目后期進行CSS調試時應，着重於頁面展現給瀏覽器后形成的HTML+CSS代碼，而不是關注於源文件，因為頁面上很多元素是源文件里沒有的，是動態生成的，對於那些動態生成的HTML元素，看看作用在它上面的CSS是哪些，再去修改其CSS或添加新的CSS。
對於CSS3，如果CSS3能達到更好的視覺效果，那就使用，不用去管那些不支持CSS3的瀏覽器，畢竟CSS3是一發展趨勢，對於靜態頁面的設計人員也應該熟悉CSS3的那些效果（比如圓角、文字陰影……），來代替之前需要用圖片來實現的效果