HTML 和 CSS 代碼結構如何寫更加規範？

01-03

項目前期html代碼結構寫的不規範，後期導致瀏覽器兼容出現大量問題，大家分享下經驗（代碼規範方面），謝謝

規範，規範，一個優秀的公司必然有一個優秀的團隊，一個優秀的團隊必然要有一個好的規範來
約束和執行。國內基本各大互聯網公司的前端都有自己的開發規範，但總的宗旨基本都是：代碼簡、易維護、性能高。對於一個大型項目經常會多人協作，這時必須
要有一個好的規範才能順利便捷地進行下去。

基本準則
符合web標準, 語義化html, 結構表現行為分離, 兼容性優良. 頁面性能方面, 代碼要求簡潔明了有序, 儘可能的減小伺服器負載, 保證最快的解析速度.

html書寫規範
1. 文檔類型聲明及編碼: 統一為html5聲明類型&; 編碼統一為&, 書寫時利用IDE實現層次分明的縮進;

2. 非特殊情況下樣式文件必須外鏈至&…&之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;

3. 引入樣式文件或JavaScript文件時, 須略去默認類型聲明, 寫法如下:

&…&

10. 在頁面中盡量避免使用style屬性,即style=」…」;

11. 必須為含有描述性表單元素(input, textarea)添加label, 如&

姓名: &&須寫成:&

&姓名: &&&

12. 能以背景形式呈現的圖片, 盡量寫入css樣式中;

13. 重要圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title;

14. 給區塊代碼及重要功能(比如循環)加上注釋, 方便後台添加功能;

15. 特殊符號使用: 儘可能使用代碼替代: 比如 &<(&<) &>(>) 空格( ) ?(?) 等等;

16. 書寫頁面過程中, 請考慮向後擴展性;

17. class id 參見 css書寫規範.

css書寫規範
1. 編碼統一為utf-8;

2. 協作開發及分工: i會根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件,
分配給前端人員實現內部結構表現行為; 共用css文件base.css由i書寫, 協作開發過程中, 每個頁面請務必都要引入,
此文件包含reset及頭部底部樣式, 此文件不可隨意修改;

3. class與id的使用: id是唯一的並是父級的, class是可以重複的並是子級的, 所以id僅使用在大的模塊上, class可用在重複使用率高及子級中; id原則上都是由分發框架文件時命名的（如#header #footer #content #nav 等）, 為JavaScript預留鉤子的除外;

4. 為JavaScript預留鉤子的命名, 請以 js_ 起始, 比如: js_hide, js_show(淘寶是用的J_開頭);

5. class與id命名:
大的框架命名比如header/footer/wrapper/left/right之類的在2中由i統一命名.其他樣式名稱由小寫英文
數字 _ 來組合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 盡量使用簡易的單片語合;
總之, 命名要語義化, 簡明化.

6. 規避class與id命名(此條重要, 若有不明白請及時與i溝通):

a）通過從屬寫法規避, 示例見d;

b）取父級元素id/class命名部分命名, 示例見d;

c）重複使用率高的命名, 請以自己代號加下劃線起始, 比如i_clear;

d）a,b兩條, 適用於在2中已建好框架的頁面, 如, 要在2中已建好框架的頁面代碼&&中加入新的div元素,

按a命名法則: &&…&&,

樣式寫法: #mainnav .firstnav{…….}

按b命名法則: &&…&&,

樣式寫法: .main_firstnav{…….}

..............

這個很多。。。具體請參閱本人博客的文章《Web前端開發規範文檔》

南水北調工程水源最後輸送到地方因水價高企不能投用，那南水北調工程會因此失去意義嗎？

代碼規範一定要有，而且必須嚴格執行。尤其對新人，我們連空行，每行後是否有多餘空格都嚴格要求，review不通過就不能提交代碼。

嚴格執行的好處是，時間長了，看代碼你就能區分出什麼是「專業」。客戶，同行可以透過嚴謹的代碼書寫看到公司背後的嚴謹和專業，對於程序員個人同樣適用。程序員就是要對自己要求高一點。

對了我們follow的是google code style google-styleguide -

Style guides for Google-originated open-source projects

問題太大，簡單說幾點我理解的。

1、統一編碼UTF8

2、每一個模塊進行注釋，省的改(或者別人改)的時候找不著，也是個良好的習慣。

3、盡量通過外部文件引入css，減小html文檔體積，有利於seo。

4、div盡量在三層以內，還是從seo方面考慮。

5、命名規範，比如「nav」「header」「footer」等，不要用一些亂七八糟的命名人家看不懂「sdfgdgf」之類的。

6、meta信息最好寫完整、h1、h2標籤、url絕對地址等等關於seo的問題要注意。

問題比較寬泛，需要不斷積累才能完善代碼規範問題~

首先面對項目的開發，不是去寫就ok了，而是要對css進行模塊化處理，建立模塊化規則，文件命名規則，css選擇器使用及命名方法。要脫離結構和行為。

可以說RTFM嗎？