【规范】前端编码规范——css 规范
編碼
在 css 首行設置文件編碼為 UTF-8。
@charset "UTF-8";class 命名
class 名稱應當盡可能短，并且意義明確。使用有意義的名稱，使用有組織的或目的明確的名稱，不要使用表現形式的名稱。
不推薦
fw-800 {font-weight:800;} .red {color:red;}推薦
.heavy {font-weight:800;} .important {color:red;}使用中劃線（-）分隔 class 中的單詞。雖然它很不方便的讓你雙擊選擇，但是它可以增強理解性。另外屬性選擇器?[attribute|=value]?也能識別中劃線（-），所以最好堅持使用中劃線作為分隔符。
不推薦
.slide_hd {} .slide_bd {}推薦
.slide-hd {} .slide-bd {}基于最近的父 class 或基本 class 作為新 class 的前綴。
不推薦
.header .logo {} .header .banner {}推薦
.header-logo {} .header-banner {}使用?.js-*?的 class 來標識行為（與樣式相對），并且不要將這些 class 寫有任何的樣式。
減少選擇器的嵌套
在寫選擇器時，要盡可能的減少嵌套層級，一般 2~3 層，不要超過 4 層。
不推薦
.main ul li a span {}推薦
.main span {}優化選擇器
當構建選擇器時應該使用清晰，準確和有語義的 class 名。盡量減少使用標簽選擇器。如果你只關心你的 class 名，而不是你的代碼元素，這樣會更容易維護。
不推薦
div.content > header.content-header > h2.title {font-size: 2em; }推薦
.content > .content-header > .title {font-size: 2em; }屬性簡寫
css 提供了各種簡寫屬性（font、background?等等），使用簡寫屬性對于代碼效率和可讀性是有很有用的。
不推薦
border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2px; padding-left: 1px; padding-right: 1px; padding-top: 0;推薦
border-top: none; font: 100%/1.6 palatino, georgia, serif; padding: 0 1px 2px;但是不能濫用簡寫形式，過度使用簡寫形式的屬性聲明會導致代碼混亂，并且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。
不推薦
width:100px; margin:0 auto;推薦
width:100px; margin-right:auto; margin-left:auto;省略 0 后面的單位
不要在 0 值后面使用單位。
不推薦
padding-bottom: 0px; margin: 0em;推薦
padding-bottom: 0; margin: 0;使用 16 進制表示顏色值
css 中的顏色值可以使用 16 進制來表示，在可能的情況下，可以進行縮寫，比如：#fff、#000。
hack 的使用
雖然 hacks 能夠很方便的解決瀏覽器之間的兼容問題，但是我們還是不要使用 hacks，盡量從根本上解決問題，比如改變結構等等。
聲明順序
為了保證更好的可讀性，我們應該遵循以下順序：
媒體查詢的位置
將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。
推薦
.element {} .element-avatar {} .element-selected {}@media (min-width: 480px) {.element {}.element-avatar {}.element-selected {} }帶前綴的屬性
當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便于多行編輯。
.selector {-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);box-shadow: 0 1px 2px rgba(0,0,0,.15); }引號
屬性選擇器或屬性值用雙引號（""），而不是單引號（''）括起來。url 的值不要使用引號。
不推薦
import url('//cdn.com/foundation.css'); input[type='submit'] {font-family: 'open sans', arial, sans-serif; } body:after {content: 'pause'; }推薦
@import url(//cdn.com/foundation.css); input[type="submit"] {font-family: "open sans", arial, sans-serif; } body:after {content: "pause"; }聲明結束
為了保證一致性和可擴展性，每個聲明應該用分號結束。
不推薦
.demo {width:100px;height:100px }推薦
.demo {width:100px;height:100px; }多行規則聲明
為了易讀性和便于快速編輯，統一將語句分為多行，即使該樣式只包含一條聲明。
不推薦
.demo {width:100px;height:100px;}推薦
.demo {width:100px;height:100px; }中文字體引用
css 中文字體可以用 unicode 格式來表示，比如“宋體”可以用?\5B8B\4F53?來表示。具體參考下表：
| 宋體 | SimSun | \5B8B\4F53 |
| 微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
更多字體點擊查看。
對于 sass 的嵌套
在 sass 中你可以嵌套選擇器，這可以使代碼變得更清潔和可讀。嵌套所有的選擇器，但盡量避免嵌套沒有任何內容的選擇器。
如果你需要指定一些子元素的樣式屬性，而父元素將不什么樣式屬性，可以使用常規的 css 選擇器鏈，這將防止您的腳本看起來過于復雜。
不推薦
.content {display: block; }.content > .news-article > .title {font-size: 1.2em; }推薦
.content {display: block;> .news-article > .title {font-size: 1.2em;} }當使用 sass 的嵌套功能的時候，重要的是有一個明確的嵌套順序。
參考文獻
- Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / Sass coding style
- http://www.css88.com/archives/5505
總結
以上是生活随笔為你收集整理的【规范】前端编码规范——css 规范的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端小技巧-定位的活学活用之仿淘宝列表
- 下一篇： 前端学习 -- 颜色