欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS代碼書寫規(guī)范究極指南

segmentfault   發(fā)布時(shí)間：2016-05-27 11:05:47   作者：Murphywuwu   我要評(píng)論
這里為大家送上一份CSS代碼書寫規(guī)范究極指南,包括代碼注釋和命名規(guī)范以及空格縮進(jìn)等一應(yīng)俱全,都來(lái)自大家平時(shí)的約定俗成,絕對(duì)值得學(xué)習(xí)借鑒,需要的朋友可以參考下

1.格式化代碼
1.1文件
[建議]：CSS文件使用無(wú)BOM的UTF-8編碼
1.2縮進(jìn)
[強(qiáng)制]：使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)，不允許使用 2 個(gè)空格 或 tab 字符。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .selector {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }  

1.3空格
[強(qiáng)制]：選擇器 與 { 之間必須包含空格。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .selector {   
  2. }  

[強(qiáng)制]：選擇器 與 { 之間必須包含空格。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. margin: 0;  

[強(qiáng)制]：列表性屬性書在單行時(shí)，,后必須跟一個(gè)空格

CSS Code復(fù)制內(nèi)容到剪貼板
  1. font-family: Aria, sans-serif;  

1.4行長(zhǎng)度
[強(qiáng)制]： 每行不得超過(guò) 120 個(gè)字符，除非單行不可分割。
[建議]： 對(duì)于超長(zhǎng)的樣式，在樣式值的 空格 處或 , 后換行，建議按邏輯分組。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* 不同屬性值按邏輯分組 */  
  2. background:   
  3.     transparent url(aVeryVeryVeryLongUrlIsPlacedHere)   
  4.     no-repeat 0 0;   
  5. /* 可重復(fù)多次的屬性，每次重復(fù)一行 */  
  6. background-image:   
  7.     url(aVeryVeryVeryLongUrlIsPlacedHere)   
  8.     url(anotherVeryVeryVeryLongUrlIsPlacedHere);   
  9. /* 類似函數(shù)的屬性值可以根據(jù)函數(shù)調(diào)用的縮進(jìn)進(jìn)行 */  
  10. background-image: -webkit-gradient(   
  11.     linear,   
  12.     left bottombottom,   
  13.     left top,   
  14.     color-stop(0.04, rgb(88,94,124)),   
  15.     color-stop(0.52, rgb(115,123,162))   
  16. );  

1.5選擇器
[強(qiáng)制]：當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .post,   
  3. .page,   
  4. .comment {   
  5.     line-height: 1.5;   
  6. }   
  7. /* bad */  
  8. .post, .page, .comment {   
  9.     line-height: 1.5;   
  10. }  

[強(qiáng)制]： >、+、~ 選擇器的兩邊各保留一個(gè)空格。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. main > nav {   
  3.     padding: 10px;   
  4. }   
  5. label + input {   
  6.     margin-left: 5px;   
  7. }   
  8. input:checked ~ button {   
  9.     background-color: #69C;   
  10. }   
  11. /* bad */  
  12. main>nav {   
  13.     padding: 10px;   
  14. }   
  15. label+input {   
  16.     margin-left: 5px;   
  17. }   
  18. input:checked~button {   
  19.     background-color: #69C;   
  20. }  

[強(qiáng)制] 屬性選擇器中的值必須用雙引號(hào)包圍。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. css   
  2. /* good */  
  3. article[character="juliet"] {   
  4.     voice-family: "Vivien Leigh", victoria, female   
  5. }   
  6. /* bad */  
  7. article[character='juliet'] {   
  8.     voice-family: "Vivien Leigh", victoria, female   
  9. }  

2.選擇器與屬性縮寫
2.1選擇器
[強(qiáng)制] 如無(wú)必要，不得為 id、class 選擇器添加類型選擇器進(jìn)行限定。
解釋：在性能和維護(hù)性上，都有一定的影響。
示例：
css

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. #error,   
  3. .danger-message {   
  4.     font-color: #c00;   
  5. }   
  6. /* bad */  
  7. dialog#error,   
  8. p.danger-message {   
  9.     font-color: #c00;   
  10. }  

[建議] 選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)，位置靠后的限定條件應(yīng)盡可能精確。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. #username input {}   
  3. .comment .avatar {}   
  4. /* bad */  
  5. .page .header .login #username input {}   
  6. .comment div * {}  

2.2 屬性縮寫
[建議] 在可以使用縮寫的情況下，盡量使用屬性縮寫。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .post {   
  3.     font: 12px/1.5 arial, sans-serif;   
  4. }   
  5. /* bad */  
  6. .post {   
  7.     font-family: arial, sans-serif;   
  8.     font-size: 12px;   
  9.     line-height: 1.5;   
  10. }  

[建議] 使用 border / margin / padding 等縮寫時(shí)，應(yīng)注意隱含值對(duì)實(shí)際數(shù)值的影響，確實(shí)需要設(shè)置多個(gè)方向的值時(shí)才使用縮寫。
解釋：border / margin / padding 等縮寫會(huì)同時(shí)設(shè)置多個(gè)屬性的值，容易覆蓋不需要覆蓋的設(shè)定。如某些方向需要繼承其他聲明的值，則應(yīng)該分開設(shè)置。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* centering <article class="page"> horizontally and highlight featured ones */  
  2. article {   
  3.     margin: 5px;   
  4.     border: 1px solid #999;   
  5. }   
  6. /* good */  
  7. .page {   
  8.     margin-right: auto;   
  9.     margin-left: auto;   
  10. }   
  11. .featured {   
  12.     border-color: #69c;   
  13. }   
  14. /* bad */  
  15. .page {   
  16.     margin: 5px auto; /* introducing redundancy */  
  17. }   
  18. .featured {   
  19.     border: 1px solid #69c; /* introducing redundancy */  
  20. }  

2.3 每個(gè)規(guī)則集之間保留一個(gè)空行

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .selector1 {   
  3.   display: block;   
  4.   width: 100px;   
  5. }   
  6. .selector2 {   
  7.   padding: 10px;   
  8.   margin: 10px auto;   
  9. }   
  10. /* bad */  
  11. .selector1 {   
  12.   display: block;   
  13.   width: 100px;   
  14. }   
  15. .selector2 {   
  16.   padding: 10px;   
  17.   margin: 10px auto;   
  18. }  

3.值與單位
3.1 文本
[強(qiáng)制] 文本內(nèi)容必須用雙引號(hào)包圍。
解釋：文本類型的內(nèi)容可能在選擇器、屬性值等內(nèi)容中。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. html[lang|="zh"] q:before {   
  3.     font-family: "Microsoft YaHei", sans-serif;   
  4.     content: "“";   
  5. }   
  6. html[lang|="zh"] q:after {   
  7.     font-family: "Microsoft YaHei", sans-serif;   
  8.     content: "”";   
  9. }   
  10. /* bad */  
  11. html[lang|=zh] q:before {   
  12.     font-family: 'Microsoft YaHei', sans-serif;   
  13.     content: '“';   
  14. }   
  15. html[lang|=zh] q:after {   
  16.     font-family: "Microsoft YaHei", sans-serif;   
  17.     content: "”";   
  18. }  

3.2 數(shù)值
[強(qiáng)制] 當(dāng)數(shù)值為 0 - 1 之間的小數(shù)時(shí)，省略整數(shù)部分的 0。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. panel {   
  3.     opacity: .8   
  4. }   
  5. /* bad */  
  6. panel {   
  7.     opacity: 0.8   
  8. }  

3.3 url()
[強(qiáng)制] url() 函數(shù)中的路徑不加引號(hào)。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body {   
  2.     background: url(bg.png);   
  3. }  

3.4 長(zhǎng)度
[強(qiáng)制] 長(zhǎng)度為 0 時(shí)須省略單位。 (也只有長(zhǎng)度單位可省)
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. body {   
  3.     padding: 0 5px;   
  4. }   
  5. /* bad */  
  6. body {   
  7.     padding: 0px 5px;   
  8. }  

3.5 顏色
[強(qiáng)制] RGB顏色值必須使用十六進(jìn)制記號(hào)形式 #rrggbb。不允許使用 rgb()。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .success {   
  3.     box-shadow: 0 0 2px rgba(0, 128, 0, .3);   
  4.     border-color: #008000;   
  5. }   
  6. /* bad */  
  7. .success {   
  8.     box-shadow: 0 0 2px rgba(0,128,0,.3);   
  9.     border-color: rgb(0, 128, 0);   
  10. }  

[強(qiáng)制] 顏色值可以縮寫時(shí)，必須使用縮寫形式。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .success {   
  3.     background-color: #aca;   
  4. }   
  5. /* bad */  
  6. .success {   
  7.     background-color: #aaccaa;   
  8. }  

[強(qiáng)制] 顏色值不允許使用命名色值。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .success {   
  3.     color: #90ee90;   
  4. }   
  5. /* bad */  
  6. .success {   
  7.     color: lightgreen;   
  8. }  

[建議] 顏色值中的英文字符采用小寫。如不用小寫也需要保證同一項(xiàng)目?jī)?nèi)保持大小寫一致。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .success {   
  3.     background-color: #aca;   
  4.     color: #90ee90;   
  5. }   
  6. /* good */  
  7. .success {   
  8.     background-color: #ACA;   
  9.     color: #90EE90;   
  10. }   
  11. /* bad */  
  12. .success {   
  13.     background-color: #ACA;   
  14.     color: #90ee90;   
  15. }   

3.6 2D 位置
[強(qiáng)制] 必須同時(shí)給出水平和垂直方向的位置。
解釋：
2D 位置初始值為 0% 0%，但在只有一個(gè)方向的值時(shí)，另一個(gè)方向的值會(huì)被解析為 center。為避免理解上的困擾，應(yīng)同時(shí)給出兩個(gè)方向的值。background-position屬性值的定義
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. body {   
  3.     background-position: center top; /* 50% 0% */  
  4. }   
  5. /* bad */  
  6. body {   
  7.     background-position: top; /* 50% 0% */  
  8. }  

4.文本編排
4.1 字體族
[強(qiáng)制] font-family 屬性中的字體族名稱應(yīng)使用字體的英文 Family Name，其中如有空格，須放置在引號(hào)中。
解釋：
所謂英文 Family Name，為字體文件的一個(gè)元數(shù)據(jù)，常見名稱如下：

字體 操作系統(tǒng) Family Name
宋體 (中易宋體) Windows SimSun
黑體 (中易黑體) Windows SimHei
微軟雅黑 Windows Microsoft YaHei
微軟正黑 Windows Microsoft JhengHei
華文黑體 Mac/iOS STHeiti
冬青黑體 Mac/iOS Hiragino Sans GB
文泉驛正黑 Linux WenQuanYi Zen Hei
文泉驛微米黑 Linux WenQuanYi Micro Hei

示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. h1 {   
  2.     font-family: "Microsoft YaHei";   
  3. }  

[強(qiáng)制] font-family 按「西文字體在前、中文字體在后」、「效果佳 (質(zhì)量高/更能滿足需求) 的字體在前、效果一般的字體在后」的順序編寫，最后必須指定一個(gè)通用字體族( serif / sans-serif )
解釋：
更詳細(xì)說(shuō)明可參考本文。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* Display according to platform */  
  2. .article {   
  3.     font-family: Arial, sans-serif;   
  4. }   
  5. /* Specific for most platforms */  
  6. h1 {   
  7.     font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;   
  8. }  

[強(qiáng)制] font-family 不區(qū)分大小寫，但在同一個(gè)項(xiàng)目中，同樣的 Family Name 大小寫必須統(tǒng)一。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. body {   
  3.     font-family: Arial, sans-serif;   
  4. }   
  5. h1 {   
  6.     font-family: Arial, "Microsoft YaHei", sans-serif;   
  7. }   
  8. /* bad */  
  9. body {   
  10.     font-family: arial, sans-serif;   
  11. }   
  12. h1 {   
  13.     font-family: Arial, "Microsoft YaHei", sans-serif;   
  14. }  

4.2 字號(hào)
[強(qiáng)制] 需要在 Windows 平臺(tái)顯示的中文內(nèi)容，其字號(hào)應(yīng)不小于 12px。
解釋：由于 Windows 的字體渲染機(jī)制，小于 12px 的文字顯示效果極差、難以辨認(rèn)。
4.3 字體風(fēng)格
[建議] 需要在 Windows 平臺(tái)顯示的中文內(nèi)容，不要使用除 normal 外的 font-style。其他平臺(tái)也應(yīng)慎用。
解釋：
由于中文字體沒(méi)有 italic 風(fēng)格的實(shí)現(xiàn)，所有瀏覽器下都會(huì) fallback 到 obilique 實(shí)現(xiàn) (自動(dòng)擬合為斜體)，小字號(hào)下 (特別是 Windows 下會(huì)在小字號(hào)下使用點(diǎn)陣字體的情況下) 顯示效果差，造成閱讀困難。

5 變換與動(dòng)畫
[強(qiáng)制] 使用 transition 時(shí)應(yīng)指定 transition-property。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .box {   
  3.     transition: color 1s, border-color 1s;   
  4. }   
  5. /* bad */  
  6. .box {   
  7.     transition: all 1s;   
  8. }  

[建議] 盡可能在瀏覽器能高效實(shí)現(xiàn)的屬性上添加過(guò)渡和動(dòng)畫。
解釋：
見本文，在可能的情況下應(yīng)選擇這樣四種變換：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. transform: translate(npx, npx);   
  2. transform: scale(n);   
  3. transform: rotate(ndeg);   
  4. opacity: 0..1;  

典型的，可以使用 translate 來(lái)代替 left 作為動(dòng)畫屬性。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* good */  
  2. .box {   
  3.     transition: transform 1s;   
  4. }   
  5. .box:hover {   
  6.     transform: translate(20px); /* move right for 20px */  
  7. }   
  8. /* bad */  
  9. .box {   
  10.     left: 0;   
  11.     transition: left 1s;   
  12. }   
  13. .box:hover {   
  14.     left: 20px; /* move right for 20px */  
  15. }   

6 響應(yīng)式
[強(qiáng)制] Media Query 如果有多個(gè)逗號(hào)分隔的條件時(shí)，應(yīng)將每個(gè)條件放在單獨(dú)一行中。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media   
  2. (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */  
  3. (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */  
  4. (min-resolution: 2dppx),             /* The standard way */  
  5. (min-resolution: 192dpi) {           /* dppx fallback */  
  6.     /* Retina-specific stuff here */  
  7. }  

7.CSS注釋
普通注釋

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* 普通注釋 */  

區(qū)塊注釋

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /**  
  2.  * 模塊：m-detail  
  3.  * author: xxx  
  4.  * edit:   2016.5.02  
  5.  */  

8.CSS命名規(guī)范
8.1命名組成
命名必須由單詞，中劃線組成。例如:.info,.news-list
不推薦使用拼音來(lái)作為樣式名，尤其是縮寫的拼音、拼音與英文的混合
所有命名都使用小寫,使用中劃線 “-” 作為連接字符，而不是下劃線 “_“
8.2命名前綴

前綴 說(shuō)明 示例
g- 全局通用樣式命名 g-mod
m- 模塊命名方式 m-detail
ui- 組件命名方式 ui-selector
j- 所有用于純交互的命名，不涉及任何樣式規(guī)則。 J-switch

不允許出現(xiàn)以類似：.info, .current, .news 開頭的選擇器，比如：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .info{sRules;}   

因?yàn)檫@樣將給我們帶來(lái)不可預(yù)知的管理麻煩以及沉重的歷史包袱。你永遠(yuǎn)也不會(huì)知道哪些樣式名已經(jīng)被用掉了，如果你是一個(gè)新人，你可能會(huì)遭遇，你每定義個(gè)樣式名，都有同名的樣式已存在，然后你只能是換樣式名或者覆蓋規(guī)則。所以我們推薦這樣寫：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .m-xxx .info{sRules;}  

所有的選擇器必須是以 g-, m-, ui- 等有前綴的選擇符開頭的，意思就是說(shuō)所有的規(guī)則都必須在某個(gè)相對(duì)的作用域下才生效，盡可能減少全局污染。 J- 這種級(jí)別的className完全交由JSer自定義，但是命名的規(guī)則也可以保持跟重構(gòu)一致，比如說(shuō)不能使用拼音之類的
8.3命名單詞
不以表現(xiàn)來(lái)命名，而是根據(jù)內(nèi)容來(lái)命名。比如：left, right, center, red, black這種以表現(xiàn)來(lái)定命名，不允許出現(xiàn)；
推薦使用功能和內(nèi)容相關(guān)詞匯的命名，如:
全選復(fù)制放進(jìn)筆記套系:package
相冊(cè):photo-album
作品:works
攻略:raiders
普通用戶:normal-user
達(dá)人:talent-user
攝影師:photographer
用戶昵稱:user-alias
頭像:head
地區(qū):area
關(guān)注數(shù):follow
粉絲數(shù):followers
互相注意:attention
標(biāo)簽:label
發(fā)表時(shí)間:publish-date,publish-time
標(biāo)題:title
信息:info
內(nèi)容:content
關(guān)于我:about
簡(jiǎn)介內(nèi)容:intro-content
評(píng)論:review
服務(wù):service
封面:cover
流行:popular
收藏:collect
查看:view
預(yù)約:reservation
促銷:sale-promotion

9.兼容性
9.1 屬性前綴
[強(qiáng)制] 帶私有前綴的屬性由長(zhǎng)到短排列，按冒號(hào)位置對(duì)齊。
解釋：
標(biāo)準(zhǔn)屬性放在最后，按冒號(hào)對(duì)齊方便閱讀，也便于在編輯器內(nèi)進(jìn)行多行編輯。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .box {   
  2.     -webkit-box-sizing: border-box;   
  3.        -moz-box-sizing: border-box;   
  4.             box-sizing: border-box;   
  5. }  

9.2 Hack
[建議] 需要添加 hack 時(shí)應(yīng)盡可能考慮是否可以采用其他方式解決。
解釋：
如果能通過(guò)合理的 HTML 結(jié)構(gòu)或使用其他的 CSS 定義達(dá)到理想的樣式，則不應(yīng)該使用 hack 手段解決問(wèn)題。通常 hack 會(huì)導(dǎo)致維護(hù)成本的增加。
[建議] 盡量使用 選擇器 hack 處理兼容性，而非 屬性 hack。
解釋：
盡量使用符合 CSS 語(yǔ)法的 selector hack，可以避免一些第三方庫(kù)無(wú)法識(shí)別 hack 語(yǔ)法的問(wèn)題。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* IE 7 */  
  2. *:first-child + html #header {   
  3.     margin-top: 3px;   
  4.     padding: 5px;   
  5. }   
  6. /* IE 6 */  
  7. * html #header {   
  8.     margin-top: 5px;   
  9.     padding: 4px;   
  10. }  

[建議] 盡量使用簡(jiǎn)單的 屬性 hack。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .box {   
  2.     _display: inline; /* fix double margin */  
  3.     float: left;   
  4.     margin-left: 20px;   
  5. }   
  6. .container {   
  7.     overflow: hidden;   
  8.     *zoom: 1; /* triggering hasLayout */  
  9. }  

相關(guān)文章

最新評(píng)論