摘要:解釋編碼具有更廣泛的適應性。示例空格強制選擇器與之間必須包含空格。示例數值強制當數值為之間的小數時,省略整數部分的。示例字號強制需要在平臺顯示的中文內容,其字號應不小于。示例響應式強制不得多帶帶編排,必須與相關的規則一起定義。
CSS 作為網頁樣式的描述語言,在百度一直有著廣泛的應用。本文檔的目標是使 CSS 代碼風格保持一致,容易被理解和被維護。
雖然本文檔是針對 CSS 設計的,但是在使用各種 CSS 的預編譯器(如 less、sass、stylus 等)時,適用的部分也應盡量遵循本文檔的約定。
CSS
文件使用無 BOM
的 UTF-8
編碼。解釋:
UTF-8 編碼具有更廣泛的適應性。BOM 在使用程序或工具處理文件時可能造成不必要的干擾。
4
個空格做為一個縮進層級,不允許使用 2
個空格 或 tab
字符。示例:
.selector { margin: 0; padding: 0; }
選擇器
與 {
之間必須包含空格。示例:
.selector {
}
屬性名
與之后的 :
之間不允許包含空格, :
與 屬性值
之間必須包含空格。示例:
margin: 0;
列表型屬性值
書寫在單行時,,
后必須跟一個空格。示例:
font-family: Arial, sans-serif;
120
個字符,除非單行不可分割。解釋:
常見不可分割的場景為URL超長。
空格
處或 ,
后換行,建議按邏輯分組。示例:
/* 不同屬性值按邏輯分組 */ background: transparent url(aVeryVeryVeryLongUrlIsPlacedHere) no-repeat 0 0; /* 可重復多次的屬性,每次重復一行 */ background-image: url(aVeryVeryVeryLongUrlIsPlacedHere) url(anotherVeryVeryVeryLongUrlIsPlacedHere); /* 類似函數的屬性值可以根據函數調用的縮進進行 */ background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.04, rgb(88,94,124)), color-stop(0.52, rgb(115,123,162)) );
示例:
/* good */ .post, .page, .comment { line-height: 1.5; } /* bad */ .post, .page, .comment { line-height: 1.5; }
>
、+
、~
選擇器的兩邊各保留一個空格。示例:
/* good */ main > nav { padding: 10px; } label + input { margin-left: 5px; } input:checked ~ button { background-color: #69C; } /* bad */ main>nav { padding: 10px; } label+input { margin-left: 5px; } input:checked~button { background-color: #69C; }
解釋:
不允許使用單引號,不允許不使用引號。
示例:
/* good */ article[character="juliet"] { voice-family: "Vivien Leigh", victoria, female; } /* bad */ article[character=juliet] { voice-family: "Vivien Leigh", victoria, female; }
示例:
/* good */ .selector { margin: 0; padding: 0; } /* bad */ .selector { margin: 0; padding: 0; }
示例:
/* good */ .selector { margin: 0; } /* bad */ .selector { margin: 0 }
id
、class
選擇器添加類型選擇器進行限定。解釋:
在性能和維護性上,都有一定的影響。
示例:
/* good */ #error, .danger-message { font-color: #c00; } /* bad */ dialog#error, p.danger-message { font-color: #c00; }
3
級,位置靠后的限定條件應盡可能精確。示例:
/* good */ #username input {} .comment .avatar {} /* bad */ .page .header .login #username input {} .comment div * {}
示例:
/* good */ .post { font: 12px/1.5 arial, sans-serif; } /* bad */ .post { font-family: arial, sans-serif; font-size: 12px; line-height: 1.5; }
border
/ margin
/ padding
等縮寫時,應注意隱含值對實際數值的影響,確實需要設置多個方向的值時才使用縮寫。解釋:
border
/ margin
/ padding
等縮寫會同時設置多個屬性的值,容易覆蓋不需要覆蓋的設定。如某些方向需要繼承其他聲明的值,則應該分開設置。
示例:
/* centeringhorizontally and highlight featured ones */ article { margin: 5px; border: 1px solid #999; } /* good */ .page { margin-right: auto; margin-left: auto; } .featured { border-color: #69c; } /* bad */ .page { margin: 5px auto; /* introducing redundancy */ } .featured { border: 1px solid #69c; /* introducing redundancy */ }
解釋:
position
/ top
/ right
/ bottom
/ left
/ float
/ display
/ overflow
等border
/ margin
/ padding
/ width
/ height
等font
/ line-height
/ text-align
/ word-wrap
等background
/ color
/ transition
/ list-style
等另外,如果包含 content
屬性,應放在最前面。
示例:
.sidebar { /* formatting model: positioning schemes / offsets / z-indexes / display / ... */ position: absolute; top: 50px; left: 0; overflow-x: hidden; /* box model: sizes / margins / paddings / borders / ... */ width: 200px; padding: 5px; border: 1px solid #ffffd; /* typographic: font / aligns / text styles / ... */ font-size: 14px; line-height: 20px; /* visual: colors / shadows / gradients / ... */ background: #f5f5f5; color: #333; -webkit-transition: color 1s; -moz-transition: color 1s; transition: color 1s; }
clear
或觸發 BFC
的方式進行 clearfix
。盡量不使用增加空標簽的方式。解釋:
觸發 BFC 的方式很多,常見的有:
如希望使用更小副作用的清除浮動方法,參見 A new micro clearfix hack 一文。
另需注意,對已經觸發 BFC 的元素不需要再進行 clearfix。
!important
聲明。!important
定義樣式。解釋:
必須注意的是,僅在設計上 確實不允許任何其它場景覆蓋樣式
時,才使用內聯的 !important
樣式。通常在第三方環境的應用中使用這種方案。下面的 z-index
章節是其中一個特殊場景的典型樣例。
z-index
進行分層,對文檔流外絕對定位元素的視覺層級關系進行管理。解釋:
同層的多個元素,如多個由用戶輸入觸發的 Dialog,在該層級內使用相同的 z-index
或遞增 z-index
。
建議每層包含100個 z-index
來容納足夠的元素,如果每層元素較多,可以調整這個數值。
z-index
指定為 999999
。解釋:
可控環境分成兩種,一種是自身產品線環境;還有一種是可能會被其他產品線引用,但是不會被外部第三方的產品引用。
不建議取值為 2147483647
。以便于自身產品線被其他產品線引用時,當遇到層級覆蓋沖突的情況,留出向上調整的空間。
!important
,將 z-index
指定為 2147483647
。解釋:
第三方環境對于開發者來說完全不可控。在第三方環境下的元素,為了保證元素不被其頁面其他樣式定義覆蓋,需要采用此做法。
解釋:
文本類型的內容可能在選擇器、屬性值等內容中。
示例:
/* good */ html[lang|="zh"] q:before { font-family: "Microsoft YaHei", sans-serif; content: "“"; } html[lang|="zh"] q:after { font-family: "Microsoft YaHei", sans-serif; content: "”"; } /* bad */ html[lang|=zh] q:before { font-family: Microsoft YaHei, sans-serif; content: “; } html[lang|=zh] q:after { font-family: "Microsoft YaHei", sans-serif; content: "”"; }
0
。示例:
/* good */ panel { opacity: .8; } /* bad */ panel { opacity: 0.8; }
url()
函數中的路徑不加引號。示例:
body { background: url(bg.png); }
url()
函數中的絕對路徑可省去協議名。示例:
body { background: url(//baidu.com/img/bg.png) no-repeat 0 0; }
0
時須省略單位。 (也只有長度單位可省)示例:
/* good */ body { padding: 0 5px; } /* bad */ body { padding: 0px 5px; }
#rrggbb
。不允許使用 rgb()
。解釋:
帶有alpha的顏色信息可以使用 rgba()
。使用 rgba()
時每個逗號后必須保留一個空格。
示例:
/* good */ .success { box-shadow: 0 0 2px rgba(0, 128, 0, .3); border-color: #008000; } /* bad */ .success { box-shadow: 0 0 2px rgba(0,128,0,.3); border-color: rgb(0, 128, 0); }
示例:
/* good */ .success { background-color: #aca; } /* bad */ .success { background-color: #aaccaa; }
示例:
/* good */ .success { color: #90ee90; } /* bad */ .success { color: lightgreen;
示例:
/* good */ .success { background-color: #aca; color: #90ee90; } /* good */ .success { background-color: #ACA; color: #90EE90; } /* bad */ .success { background-color: #ACA; color: #90ee90; }
解釋:
2D 位置初始值為 0% 0%
,但在只有一個方向的值時,另一個方向的值會被解析為 center。為避免理解上的困擾,應同時給出兩個方向的值。background-position屬性值的定義
示例:
/* good */ body { background-position: center top; /* 50% 0% */ } /* bad */ body { background-position: top; /* 50% 0% */ }
font-family
屬性中的字體族名稱應使用字體的英文 Family Name
,其中如有空格,須放置在引號中。解釋:
所謂英文 Family Name,為字體文件的一個元數據,常見名稱如下:
示例:
h1 { font-family: "Microsoft YaHei"; }
font-family
按「西文字體在前、中文字體在后」、「效果佳 (質量高/更能滿足需求) 的字體在前、效果一般的字體在后」的順序編寫,最后必須指定一個通用字體族( serif
/ sans-serif
)。解釋:
更詳細說明可參考本文。
示例:
/* Display according to platform */ .article { font-family: Arial, sans-serif; } /* Specific for most platforms */ h1 { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif; }
font-family
不區分大小寫,但在同一個項目中,同樣的 Family Name
大小寫必須統一。示例:
/* good */ body { font-family: Arial, sans-serif; } h1 { font-family: Arial, "Microsoft YaHei", sans-serif; } /* bad */ body { font-family: arial, sans-serif; } h1 { font-family: Arial, "Microsoft YaHei", sans-serif; }
12px
。解釋:
由于 Windows 的字體渲染機制,小于 12px
的文字顯示效果極差、難以辨認。
normal
外的 font-style
。其他平臺也應慎用。解釋:
由于中文字體沒有 italic
風格的實現,所有瀏覽器下都會 fallback 到 obilique
實現 (自動擬合為斜體),小字號下 (特別是 Windows 下會在小字號下使用點陣字體的情況下) 顯示效果差,造成閱讀困難。
font-weight
屬性必須使用數值方式描述。解釋:
CSS 的字重分 100 – 900 共九檔,但目前受字體本身質量和瀏覽器的限制,實際上支持 400
和 700
兩檔,分別等價于關鍵詞 normal
和 bold
。
瀏覽器本身使用一系列啟發式規則來進行匹配,在 <700
時一般匹配字體的 Regular 字重,>=700
時匹配 Bold 字重。
但已有瀏覽器開始支持 =600
時匹配 Semibold 字重 (見此表),故使用數值描述增加了靈活性,也更簡短。
示例:
/* good */ h1 { font-weight: 700; } /* bad */ h1 { font-weight: bold; }
line-height
在定義文本段落時,應使用數值。解釋:
將 line-height
設置為數值,瀏覽器會基于當前元素設置的 font-size
進行再次計算。在不同字號的文本段落組合中,能達到較為舒適的行間間隔效果,避免在每個設置了 font-size
都需要設置 line-height
。
當 line-height
用于控制垂直居中時,還是應該設置成與容器高度一致。
示例:
.container { line-height: 1.5; }
transition
時應指定 transition-property
。示例:
/* good */ .box { transition: color 1s, border-color 1s; } /* bad */ .box { transition: all 1s; }
解釋:
見本文,在可能的情況下應選擇這樣四種變換:
transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;
典型的,可以使用 translate
來代替 left
作為動畫屬性。
示例:
/* good */ .box { transition: transform 1s; } .box:hover { transform: translate(20px); /* move right for 20px */ } /* bad */ .box { left: 0; transition: left 1s; } .box:hover { left: 20px; /* move right for 20px */ }
Media Query
不得多帶帶編排,必須與相關的規則一起定義。示例:
/* Good */ /* header styles */ @media (...) { /* header styles */ } /* main styles */ @media (...) { /* main styles */ } /* footer styles */ @media (...) { /* footer styles */ } /* Bad */ /* header styles */ /* main styles */ /* footer styles */ @media (...) { /* header styles */ /* main styles */ /* footer styles */ }
Media Query
如果有多個逗號分隔的條件時,應將每個條件放在多帶帶一行中。示例:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */ (min-resolution: 2dppx), /* The standard way */ (min-resolution: 192dpi) { /* dppx fallback */ /* Retina-specific stuff here */ }
解釋:
標準屬性放在最后,按冒號對齊方便閱讀,也便于在編輯器內進行多行編輯。
示例:
.box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
hack
時應盡可能考慮是否可以采用其他方式解決。解釋:
如果能通過合理的 HTML 結構或使用其他的 CSS 定義達到理想的樣式,則不應該使用 hack 手段解決問題。通常 hack 會導致維護成本的增加。
選擇器 hack
處理兼容性,而非 屬性 hack
。解釋:
盡量使用符合 CSS 語法的 selector hack,可以避免一些第三方庫無法識別 hack 語法的問題。
示例:
/* IE 7 */ *:first-child + html #header { margin-top: 3px; padding: 5px; } /* IE 6 */ * html #header { margin-top: 5px; padding: 4px; }
屬性 hack
。示例:
.box { _display: inline; /* fix double margin */ float: left; margin-left: 20px; } .container { overflow: hidden; *zoom: 1; /* triggering hasLayout */ }
Expression
。文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/2199.html
摘要:前端編碼規范之使用規范前端編碼規范之樣式編碼規范前端編碼規范之結構規范前端編碼規范之最佳實踐前端編碼規范之編碼規范命名的原則是通俗易懂,盡量保持不重復沖突,盡量不要用。我覺得應該避免出現出現這種方式用預處理器拼接出來的名稱,會生成。 前端編碼規范之:Git使用規范 前端編碼規范之:樣式(scss)編碼規范 前端編碼規范之:HTML結構規范 前端編碼規范之:Vue最佳實踐 前端編碼規范...
摘要:文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰,必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式,樣式代碼保持一行,多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式; HTML文檔必須使用HTML5的標準文檔格式; HTMLCSS編寫規范...
摘要:文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰,必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式,樣式代碼保持一行,多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式; HTML文檔必須使用HTML5的標準文檔格式; HTMLCSS編寫規范...
摘要:文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰,必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式,樣式代碼保持一行,多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式; HTML文檔必須使用HTML5的標準文檔格式; HTMLCSS編寫規范...
摘要:用兩個空格代替制表符這是唯一能保證在所有環境下獲得一致展現的方法。編輯器配置將你的編輯器按照下面的配置進行設置,以免常見的代碼不一致和差異用兩個空格代替制表符保存文件時刪除尾部的空白符設置文件編碼為在文件結尾添加一個空白行。 黃金定律 永遠遵循同一套編碼規范 - 可以是這里列出的,也可以是你自己總結的。如果發現規范中有任何錯誤,敬請指正。 HTML 語法 用兩個空格代替制表符 (ta...
導語: 隨著業務的增長和開發團隊的成員快速增加,其中很多新人來自于五湖四海各大門派,在編碼的風格和習慣中也出現各異。 通常在相互 codereview 時發現很多代碼上的問題,久而久之代碼出現了代碼難以維護的問題,甚至還會出現低級錯誤。 因此,我嘗試在前端代碼質量的管控上做了些探索,也總結了一些經驗分享給大家。 作者:鄭振波 本文大綱介紹 編碼規范 冗余文件與代碼 1. 編碼規范 在一些老項...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3785·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00