推薦大家使用的CSS書寫規范、順序
寫了這么久的CSS，但自己都沒有按照良好的CSS書寫規范來寫CSS代碼，東寫一段西寫一段，命名也是想到什么寫什么，過一段時間自己都不知道寫的是那一塊內容， 這樣會影響代碼的閱讀體驗和工作進程，在更改樣式時也會麻煩很多；看網上的大能前輩總結的CSS書寫規范、CSS書寫順序供大家參考，我想對寫CSS的前端用戶來說是 值得學習的。 想了想我認為前端是一個整體，HTML的布局和CSS命名息息相關，body里包個外框-（wrapper）>各個布局模塊(g)-{g-one、g-two、g-three、g-four、
g-five}>模塊里內容-內層（core）-{內容多以c-header、c-main、c-foot}>內層里內容以“c-header>nameClass”來表示；
最后找到網上大能前輩的方法做參考！！！
CSS的引用、開頭
1.樣式放頭上，腳本放腳下。不內嵌，只外鏈。
2.@charset "utf-8";注意，必須要定義在 CSS 文件所有字符的前面（包括編碼注釋），@charset 才會生效。
例如，下面的例子都會使得 @charset 失效：
/* 字符編碼 */
@charset "utf-8";
html,
body {
height: 100%;
}
@charset "utf-8";
3.注釋用英文，避免解析出現亂碼；
4.慎用 * 通配符。所謂通配符，就是將 CSS 中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。
命名空間規范
1.布局：以 g 為命名空間，例如：.g-wrap 、.g-header、.g-content。
2.狀態：以 s 為命名空間，表示動態的、具有交互性質的狀態，例如：.s-current、s-selected。
3.工具：以 u 為命名空間，表示不耦合業務邏輯的、可復用的的工具，例如：u-clearfix、u-ellipsis。
4.組件：以 m 為命名空間，表示可復用、移植的組件模塊，例如：m-slider、m-dropMenu。
5.鈎子：以 j 為命名空間，表示特定給 JavaScript 調用的類名，例如：j-request、j-open。
CSS樣式層疊覆蓋順序
層疊樣式類型
類型： 1. 瀏覽器默認樣式 2. 瀏覽器用戶自定義樣式 3. 外部樣式表 4. 內部樣式表 5. 內聯樣式表 順序： 瀏覽器默認樣式 < 瀏覽器用戶自定義樣式 < 外部樣式表 < 內部樣式表 < 內聯樣式表 樣式表內部選擇器 1. 類選擇器 2. 類派生選擇器 3. ID選擇器 4. ID派生選擇器 樣式表內部選擇器生效順序 類選擇器 < 類派生選擇器 < ID選擇器 < ID派生選擇器 生效規則 1. 樣式表的元素選擇器選擇越精確，則其中的樣式優先級越高。 id選擇器指定的樣式 > 類選擇器指定的樣式 > 元素類型選擇器指定的樣式 2. 對於相同類型選擇器指定的樣式，在樣式表文件中，越靠后的優先級越高。 3. 一個元素同時應用多個class，后定義的優先(即近者優先) 4. 如果要讓某個樣式的優先級變高，可以使用!important來指定。
CSS書寫順序
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
CSS書寫規范
css-written-order
使用CSS縮寫屬性
CSS有些屬性是可以縮寫的，比如padding,margin,font等等，這樣精簡代碼同時又能提高用戶的閱讀體驗。
abbreviation
去掉小數點前的“0”
簡寫命名
很多用戶都喜歡簡寫類名，但前提是要讓人看懂你的命名才能簡寫哦！
16進制顏色代碼縮寫
有些顏色代碼是可以縮寫的，我們就盡量縮寫吧，提高用戶體驗為主。
連字符CSS選擇器命名規范
color-abb
1.長名稱或詞組可以使用中橫線來為選擇器命名。
2.不建議使用“_”下划線來命名CSS選擇器，為什么呢？
輸入的時候少按一個shift鍵；
瀏覽器兼容問題 （比如使用_tips的選擇器命名，在IE6是無效的）
能良好區分JavaScript變量命名（JS變量命名是用“_”）
這里有一篇破折號與下划線的詳細討論，英文：點擊查看 中文篇：點擊查看
字符小寫
定義的選擇器名，屬性及屬性值的書寫皆為小寫。
在xhtml標准中規定了所有標簽、屬性和值都小寫，CSS 書寫也應該遵循此約定。
選擇器
當一個規則包含多個選擇器時，每個選擇器獨占一行。
、+、~、> 選擇器的兩邊各保留一個空格。
.g-header > .g-header-des, .g-content ~ .g-footer { }
代碼注釋
單行注釋
星號與內容之間必須保留一個空格。
/* 表格隔行變色 */
多行注釋
星號要一列對齊，星號與內容之間必須保留一個空格。
/**
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/
規則聲明塊內注釋
使用 // 注釋，// 后面加上一個空格，注釋獨立一行。
.foo{
border: 0; // .... }
文件注釋
文件頂部必須包含文件注釋，用 @name 標識文件說明。星號要一列對齊，星號與內容之間必須保留一個空格，標識符冒號與內容之間必須保留一個空格。
/**
* @name: 文件名或模塊名
* @description: 文件或模塊描述
* @author: author-name(mail-name@domain.com)
* author-name2(mail-name2@domain.com)
* @update: 2015-04-29 00:02
*/
- @description為文件或模塊描述。
- @update為可選項，建議每次改動都更新一下。
當該業務項目主要由固定的一個或多個人負責時，需要添加@author標識，一方面是尊重勞動成果，另一方面方便在需要時快速定位責任人。
數值與單位
當屬性值或顏色參數為 0 - 1 之間的數時，省略小數點前的 0 。
color: rgba(255, 255, 255, 0.5)
color: rgba(255, 255, 255, .5);
當長度值為 0 時省略單位。
margin: 0px auto
margin: 0 auto
不要隨意使用Idunderline
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復使用，另外id的優先級優先與class，所以id應該按需使用，而不能濫用。
css-id
為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。
樣式屬性順序
單個樣式規則下的屬性在書寫時，應按功能進行分組，並以 Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。
如果包含 content 屬性，應放在最前面；
Positioning Model 布局方式、位置，相關屬性包括：position / top / right / bottom / left / z-index / display / float / ...
Box Model 盒模型，相關屬性包括：width / height / padding / margin / border / overflow / ...
Typographic 文本排版，相關屬性包括：font / line-height / text-align / word-wrap / ...
Visual 視覺外觀，相關屬性包括：color / background / list-style / transform / animation / transition / ...
Positioning 處在第一位，因為他可以使一個元素脫離正常文本流，並且覆蓋盒模型相關的樣式。盒模型緊跟其后，因為他決定了一個組件的大小和位置。
其他屬性只在組件內部起作用或者不會對前面兩種情況的結果產生影響，所以他們排在后面。
合理使用使用引號
在某些樣式中，會出現一些含有空格的關鍵字或者中文關鍵字。
font-family 內使用引號
當字體名字中間有空格，中文名字體及 Unicode 字符編碼表示的中文字體，為了保證兼容性，都建議在字體兩端添加單引號或者雙引號：
body {
font-family: 'Microsoft YaHei', '黑體-簡', '\5b8b\4f53';
}
background-image 的 url 內使用引號 如果路徑里面有空格，舊版 IE 是無法識別的，會導致路徑失效，建議不管是否存在空格，都添加上單引號或者雙引號：
div {
background-image: url('...');
}
CSS命名規范（規則）
status-select
常用的CSS命名規則
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
登錄條：loginbar
標志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權：copyright
滾動：scroll
內容：content
標簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標題：title
加入：joinus
指南：guide
服務：service
注冊：regsiter
狀態：status
投票：vote
合作伙伴：partner
注釋的寫法:
/* Header */
內容區
/* End Header */
Id的命名:
1)頁面結構
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
(2)導航
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子菜單：submenu
標題: title
摘要: summary
(3)功能
標志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊：register
搜索：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標籤頁：tab
文章列表：list
提示信息：msg
當前的: current
小技巧：tips
圖標: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權：copyright、
避免使用 !important
除去某些極特殊的情況，盡量不要不要使用 !important。
!important 的存在會給后期維護以及多人協作帶來噩夢般的影響。
當存在樣式覆蓋層疊時，如果你發現新定義的一個樣式無法覆蓋一個舊的樣式，只有加上 !important 才能生效時，是因為你新定義的選擇器的優先級不夠舊樣式選擇器的優先級高。
所以，合理的書寫新樣式選擇器，是完全可以規避一些看似需要使用 !important 的情況的。
SASS 使用建議
嵌套層級規定
使用 SASS 、 LESS 等預處理器時，建議嵌套層級不超過 3 層。
組件/公用類的使用方法
組件/公用類使用 %placeholders 定義，使用 @extend 引用。如：
|
1
2
3
4
5
6
7
8
|
%clearfix {
overflow
:
auto
;
zoom:
1
;
}
.g-header {
@extend %clearfix;
}
|
組件類的思考
使用 SASS ，經常會預先定義好一些常用公用組件類，譬如清除浮動，水平垂直居中，文字 ellipsis。又或者多個元素具有同樣的樣式，我們希望能夠少寫這部分代碼，公共部分抽離出來只寫一次，達到復用。
但是復用的方式在 SASS 中有多種，那么是使用單獨使用一個類定義，給需要的標簽添加，還是使用 @include 或者 @extend在定義的類中引入一個 @mixin，或者一個 @function 呢？
基於讓 CSS 更簡潔以及代碼的復用考慮，采用上面的使用 %placeholders 定義，使用 @extend 引用的方案。
%placeholders，只是一個占位符，只要不通過@extend調用，編譯后不會產生任何代碼量- 使用
@extend引用，則是因為每次調用相同的%placeholders時，編譯出來相同的 CSS 樣式會進行合並（反之，如果使用@include調用定義好的@mixin，編譯出來相同的 CSS 樣式不會進行合並） - 這里的組件類特指那些不會動態改變的 CSS 樣式，注意與那些可以通過傳參生成不同數值樣式的
@mixin方法進行區分
盡量避免使用標簽名
使用 SASS ，或者說在 CSS 里也有這種困惑。
假設我們有如下 html 結構：
|
1
2
3
4
5
6
7
8
|
<
div
class="g-content">
<
ul
class="g-content-list">
<
li
class="item"></
li
>
<
li
class="item"></
li
>
<
li
class="item"></
li
>
<
li
class="item"></
li
>
</
ul
>
</
div
>
|
在給最里層的標簽命名書寫樣式的時候，我們有兩種選擇：
|
1
2
3
4
5
6
7
|
.g-content {
.g-content-list {
li {
...
}
}
}
|
或者是
|
1
2
3
4
5
6
7
|
.g-content {
.g-content-list {
.item {
...
}
}
}
|
也就是，編譯之后生成了下面這兩個，到底使用哪個好呢？
.g-content .g-content-list li { }.g-content .g-content-list .item { }
基於 CSS 選擇器的解析規則（從右向左），建議使用上述第二種 .g-content .g-content-list .item { } ，避免使用通用標簽名作為選擇器的一環可以提高 CSS 匹配性能。
瀏覽器的排版引擎解析 CSS 是基於從右向左（right-to-left）的規則，這么做是為了使樣式規則能夠更快地與渲染樹上的節點匹配。
編寫CSS樣式表需要注意的15個點
1、不要使用過小的圖片做背景平鋪。這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區域，需要 200*200=40, 000 次，占用資源。
2、無邊框。推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，占用資源。
3、慎用 * 通配符。所謂通配符，就是將 CSS 中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。
4、CSS 的十六進制顏色代碼縮寫。習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優孰劣，有待仔細考證。
5、樣式放頭上，腳本放腳下。不內嵌，只外鏈。
6、堅決不用 CSS 表達式。
7、使用引用樣式表，而不是通過 @import 導入。
8、一般來說，PNG 比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得優化。
9、千萬不要在 HTML 中縮放圖片，一者不好看，二者占資源。
10、正文字體最好用偶數，12px、14px、16px，效果非常好。特例，15px。
11、block、ul、ol 等上下留出至少一倍行距，左側至少兩倍行距，右側隨意。
12、段落之間，至少要有一倍行距。
13、強行指定某些元素的 line-height，正文 1.6 倍於文字大小，標題 1.3 倍。
14、中文標點用全角。英文夾雜在中文中，左右空格，半角。
15、中文字體的粗體和斜體，遠離較好，利民利己。
----------- 本文來自 Gadxiong 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/Gadxiong/article/details/80440148?utm_source=copy--------------