CSS團隊協做規範

命名禁止縮寫

• 精簡扼要地對class命名，請勿使用自定義縮寫。
• class name的命名必須是行爲、有語意的。

禁止在非特殊狀況下寫！important

• CSS自己有權重設計，任意地使用!important會形成權重混亂而沒法維護。

不可輕易限定寬高

• 用戶能夠自行設定本身的瀏覽器，例如Android手機能夠設定顯示字體大小，寫死的高度會讓字體相互重疊。

RWD失效

• 移動設備的高度是無限的，寬度是有限的。
• 請不要把寬寫死。

img請讓它自動縮放

• 請不要替img的容器設定寬或高，讓它根據設備自行縮放。
• 請使用bootstrap的img-responsive。

• 若是確實要用：

  width: 100%;
    height: auto;

• 若是要給img border-radius設定樣式，請使用父元素控制行爲，保持img只載入圖片，沒有樣式。

優先使用grid排版

• 請不要花不少時間在寫media query，設定一堆breakpoint，本身寫組件樣式，本身控制每種設備上的容器寬度。
• 請使用grid system，這些都是已經成熟的框架，並且有些也已經幫你處理了瀏覽器相容問題。

不可直接over write或在本來框架的class增長內容

• 直接寫一個新的class，不要覆蓋原有的設計。
• 不要再已有的class上添加樣式，請額外單獨寫一個。

設計RWD網站，請遵循移動設備優先原則

• 設計師的設計順序，以桌面版優先，再設計手機版。
• 前端工程師拿到視覺圖，開始寫HTML/CSS時以手機版爲第一優先。

手機開啓網頁很吃手機效能和網絡情況，前端工程師一開始就以手機版爲優先，可讓HTML一開始載入，使用最少的效能快速載入網頁。當開始製做桌面版時，只會少量跑版，作適當微調便可。
相反，若是先製做桌面版，當手機版畫面被切掉或是跑版，須要花更多時間去調整。

再來是iPhone手機的retina，會將圖片放到手機上時自動作兩倍縮小，在一開始製做時便可發現圖片載入是否吃效能。爲了讓圖片能在iPhone上有更好的體驗，建議移動版優先。

不可以使用html tag selector

• 請直接定義class的樣式，不須要指定html tag。

層級不能夠超過三層

• 超過三層表示耦合度過高，不具備彈性、可維護性。

用同樣的element時不要把一堆東西所有寫在裏面，請把排版相關的獨立出來

• 把border-radius寫在img上面，請把img保持乾淨。定位，例如position: absolute;

不要隨意none掉畫面上的tag或行爲

• 請注意若是要none掉一些樣式，請依照使用程度決定。
• 使用程度遍及整個網站，請直接使用reset.css
• 使用程度中等如下，請定義一個class

reset.css

• 常見的a tag不要有underline
• list消除原有樣式
• 請在reset.css上定義，而且設爲第一載入次序

有JavaScript行爲的class能夠爲命名加入name space

#js-project-show {}

請勿任意使用br hr tag

• br是換行，請使用在p tag裏面，當p裏面文字過多時可使用。
• hr是快速劃線，可是即將被淘汰，請直接使用border寫在class裏面。
• br必須去思考父區塊是否是display: block;，若是要換行，應該思考是否是下一段文字。
• 線條請都是用border去寫。