CSS要怎麼寫才規範，提高可讀性？

01-04

題主是一個大一狗，萌新。軟體電子商務專業，以後工作的主要方向就是前端製作，大學內能靠課堂上學到的東西是真的不多，大部分都是自己去試著模仿網上的頁面做靜態網頁，但在這個過程中遇到問題就是我的代碼太多了，太亂了，每個div的類的看著別人寫好的代碼，我可能比別人多一半！我想問問前端的攻城獅們，怎樣才能使自己寫的CSS代碼更簡潔，可讀性更高，還有就是CSS的初始化哪些？應該注意那些問題？感謝了。

首先，關於代碼規範這個項目 https://github.com/ecomfe/spec 應該對題主有幫助

摘要

Javascript編碼規範
Javascript編碼規範 - ESNext補充篇
HTML編碼規範 [1.2]
CSS編碼規範 [1.2]
Less編碼規範 [1.1]
E-JSON數據傳輸標準 [1.0]
模塊和載入器規範 [1.1]
包結構規範 [1.1]
項目目錄結構規範 [1.1]
圖表庫標準 [1.0]
react編碼規範 [draft]

另 CSS代碼初始化

CSS初始化指重設瀏覽器樣式，使不同瀏覽器對標籤的樣式盡量統一。

舉個栗子。考慮兼容性，簡單的初始化方法：

* {padding: 0; margin: 0;}

還有例如考慮瀏覽器盒模型之間的差異（主要和IE)

body { box-sizeing: border-box; /* Firefox */ -moz-box-sizing:border-box; /* Safari*/ -webkit-box-sizing:border-box; }

一些CSS初始化的工具:

CSS Tools: Reset CSS

CSS Reset - YUI Library

一些具體的例子：

以下內容轉自各大網站CSS代碼初始化集合_慕課手記

騰訊QQ官網樣式初始化(http://www.qq.com)

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select {margin:0;padding:0} body {font:12px"宋體","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} a {color:#2d374b;text-decoration:none} a:hover {color:#cd0200;text-decoration:underline} em {font-style:normal} li {list-style:none} img {border:0;vertical-align:middle} table {border-collapse:collapse;border-spacing:0} p {word-wrap:break-word}

新浪官網樣式初始化(http://www.sina.com.cn/)

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div {margin:0;padding:0;border:0;} body {background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋體","Arial Narrow";} ul,ol {list-style-type:none;} select,input,img,select {vertical-align:middle;} a {text-decoration:none;} a:link {color:#009;} a:visited {color:#800080;} a:hover,a:active,a:focus {color:#c00;text-decoration:underline;}

淘寶官網樣式初始化(http://www.taobao.com/)

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; } h1, h2, h3, h4, h5, h6 { font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small { font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub { vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

網易官網樣式初始化(http://www.163.com/)

html {overflow-y:scroll;} body {margin:0; padding:29px00; font:12px"5B8B4F53",sans-serif;background:#ffffff;} div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p {padding:0; margin:0;} table,td,tr,th {font-size:12px;} li {list-style-type:none;} img {vertical-align:top;border:0;} ol,ul {list-style:none;} h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;} address,cite,code,em,th {font-weight:normal; font-style:normal;

最後，我也是前端新手，第一次寫答案雖然內容簡單還是覺得用這編輯器心好累。還是寫代碼爽。貢獻出辣么多精華答案的大大們好偉大&>"&<。

但是覺得題主才大一就確定了工作方向是不是太早了。。萬一你接觸到了其他的方向以後發現更適合自己呢？

強迫症的我估計再讀一遍問題會忍不住修改的。。有病句。。?_?

用於選擇器的類名和 ID 名儘可能使用統一的命名方式（參考 BEM、SUIT、SMACSS 等的思想）。

在較複雜的 CSS 文件中注意使用注釋和分組。

編寫時根據實際環境，適度考慮響應式和漸進的問題。

儘可能減少使用 hack 和廢棄的規範。

適度使用預/後處理器配合編寫 CSS，但不要過度依賴。

時刻牢記 DRY，不要重複無謂的工作。

不過個人認為，剛開始其實沒必要太在意這個，熟悉了就會注意的。

要操作樣式的話盡量用class屬性來標識。然後命名要語義化。盡量讓人一看就知道這個是什麼部分。這個組件是幹嘛用的。

css命名規則

可以參考這個鏈接的一些命名。

如果要操作dom的話盡量用id來標識。命名id的時候要注意駝峰命名法。

第一

拿過一個項目來不要著急去寫代碼，先了解整站的樣式結構，分析構思整體的框架，將設計圖分類。

第二

開始編寫整站的構架，css樣式的復用性一定要高，前期可能寫的會比較慢，等框架搭建好之後，其餘的頁面基本上是套class，然後特殊的地方用特殊的命名，特殊處理。你會發現框架搭好之後一天可以寫10幾個頁面都不是問題。

第三

套頁面。

總結

構思框架比敲代碼要重要的多，而且維護起來要簡單的多。初始化樣式一定要單獨寫，比如表單，按鈕，輸入框，彈出框，分頁器等。

多寫多練慢慢體會就好了。

去了解一下BEM

css selector 的優先順序很重要，好好去理解一下，應該會有幫助。