CSS代碼書寫規(guī)范有哪些

本篇文章為大家展示了CSS代碼書寫規(guī)范有哪些，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出襄城免費做網(wǎng)站回饋大家。

1.格式化代碼
1.1文件
[建議]：CSS文件使用無BOM的UTF-8編碼
1.2縮進
[強制]：使用 4 個空格做為一個縮進層級，不允許使用 2 個空格 或 tab 字符。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .selector {   

  2.     margin: 0;   

  3.     padding: 0;   

  4. }  

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .selector {   

  2. }  

[強制]：選擇器 與 { 之間必須包含空格。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. margin: 0;  

[強制]：列表性屬性書在單行時，,后必須跟一個空格

CSS Code復(fù)制內(nèi)容到剪貼板

  1. font-family: Aria, sans-serif;  

1.4行長度
[強制]： 每行不得超過 120 個字符，除非單行不可分割。
[建議]： 對于超長的樣式，在樣式值的 空格 處或 , 后換行，建議按邏輯分組。

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)用的縮進進行 */  

  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選擇器
[強制]：當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨占一行。

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. }  

[強制]： >、+、~ 選擇器的兩邊各保留一個空格。
示例：

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. }  

[強制] 屬性選擇器中的值必須用雙引號包圍。

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選擇器
[強制] 如無必要，不得為 id、class 選擇器添加類型選擇器進行限定。
解釋：在性能和維護性上，都有一定的影響。
示例：
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. }  

[建議] 選擇器的嵌套層級應(yīng)不大于 3 級，位置靠后的限定條件應(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 等縮寫時，應(yīng)注意隱含值對實際數(shù)值的影響，確實需要設(shè)置多個方向的值時才使用縮寫。
解釋：border / margin / padding 等縮寫會同時設(shè)置多個屬性的值，容易覆蓋不需要覆蓋的設(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 每個規(guī)則集之間保留一個空行

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 文本
[強制] 文本內(nèi)容必須用雙引號包圍。
解釋：文本類型的內(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ù)值
[強制] 當數(shù)值為 0 - 1 之間的小數(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()
[強制] url() 函數(shù)中的路徑不加引號。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. body {   

  2.     background: url(bg.png);   

  3. }  

3.4 長度
[強制] 長度為 0 時須省略單位。 (也只有長度單位可省)
示例：

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 顏色
[強制] RGB顏色值必須使用十六進制記號形式 #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. }  

[強制] 顏色值可以縮寫時，必須使用縮寫形式。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. /* good */  

  2. .success {   

  3.     background-color: #aca;   

  4. }   

  5. /* bad */  

  6. .success {   

  7.     background-color: #aaccaa;   

  8. }  

[強制] 顏色值不允許使用命名色值。
示例：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. /* good */  

  2. .success {   

  3.     color: #90ee90;   

  4. }   

  5. /* bad */  

  6. .success {   

  7.     color: lightgreen;   

  8. }  

[建議] 顏色值中的英文字符采用小寫。如不用小寫也需要保證同一項目內(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 位置
[強制] 必須同時給出水平和垂直方向的位置。
解釋：
2D 位置初始值為 0% 0%，但在只有一個方向的值時，另一個方向的值會被解析為 center。為避免理解上的困擾，應(yīng)同時給出兩個方向的值。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 字體族
[強制] font-family 屬性中的字體族名稱應(yīng)使用字體的英文 Family Name，其中如有空格，須放置在引號中。
解釋：
所謂英文 Family Name，為字體文件的一個元數(shù)據(jù)，常見名稱如下：

字體操作系統(tǒng)Family Name
宋體 (中易宋體)WindowsSimSun
黑體 (中易黑體)WindowsSimHei
微軟雅黑WindowsMicrosoft YaHei
微軟正黑WindowsMicrosoft JhengHei
華文黑體Mac/iOSSTHeiti
冬青黑體Mac/iOSHiragino Sans GB
文泉驛正黑LinuxWenQuanYi Zen Hei
文泉驛微米黑LinuxWenQuanYi Micro Hei


示例：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. h2 {   

  2.     font-family: "Microsoft YaHei";   

  3. }  

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

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. h2 {   

  7.     font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;   

  8. }  

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. /* good */  

  2. body {   

  3.     font-family: Arial, sans-serif;   

  4. }   

  5. h2 {   

  6.     font-family: Arial, "Microsoft YaHei", sans-serif;   

  7. }   

  8. /* bad */  

  9. body {   

  10.     font-family: arial, sans-serif;   

  11. }   

  12. h2 {   

  13.     font-family: Arial, "Microsoft YaHei", sans-serif;   

  14. }  

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

5 變換與動畫
[強制] 使用 transition 時應(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. }  

[建議] 盡可能在瀏覽器能高效實現(xiàn)的屬性上添加過渡和動畫。
解釋：
見本文，在可能的情況下應(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 來代替 left 作為動畫屬性。
示例：

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)式
[強制] Media Query 如果有多個逗號分隔的條件時，應(yīng)將每個條件放在單獨一行中。
示例：

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
不推薦使用拼音來作為樣式名，尤其是縮寫的拼音、拼音與英文的混合
所有命名都使用小寫,使用中劃線 “-” 作為連接字符，而不是下劃線 “_“
8.2命名前綴

前綴說明示例
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ù)知的管理麻煩以及沉重的歷史包袱。你永遠也不會知道哪些樣式名已經(jīng)被用掉了，如果你是一個新人，你可能會遭遇，你每定義個樣式名，都有同名的樣式已存在，然后你只能是換樣式名或者覆蓋規(guī)則。所以我們推薦這樣寫：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. .m-xxx .info{sRules;}  

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

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

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 時應(yīng)盡可能考慮是否可以采用其他方式解決。
解釋：
如果能通過合理的 HTML 結(jié)構(gòu)或使用其他的 CSS 定義達到理想的樣式，則不應(yīng)該使用 hack 手段解決問題。通常 hack 會導(dǎo)致維護成本的增加。
[建議] 盡量使用 選擇器 hack 處理兼容性，而非 屬性 hack。
解釋：
盡量使用符合 CSS 語法的 selector hack，可以避免一些第三方庫無法識別 hack 語法的問題。
示例：

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. }  

[建議] 盡量使用簡單的 屬性 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. }  

上述內(nèi)容就是CSS代碼書寫規(guī)范有哪些，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：CSS代碼書寫規(guī)范有哪些
轉(zhuǎn)載來源：http://bm7419.com/article4/goicie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、小程序開發(fā)、企業(yè)建站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)