CSS書寫規範
CSS書寫規範
https://www.aliyun.com/jiaocheng/636928.html
1. CSS書寫順序
1.1 位置屬性(position,top,right,z-index,display,float 等)
1.2 大小(width,height,padding,margin)
1.3 文字系列(font,line-height,letter-spacing,color,text-align等)
1.4 背景(background,border等)
1.5 其他(animation,transition 等)
示例:
樣式裏邊:先寫位置,大小,文字系列,背景…
註意對齊,相差一個tab鍵的距離。習慣上冒號後邊會空一個空格符。
2. CSS 書寫規範
2.1 使用CSS縮寫屬性
2.1.1 CSS 有些屬性是可以縮寫,比如padding,margin,font等等,這樣精簡代碼同時又能提高用戶的閱讀
.list-box{ .list-box{ border-top-style: none; border-top: 0; font-family: serif; font: 100%/1.6 serif; font-size: 100%; 簡寫: padding: 0 1em 2em; line-height: 1.6; } padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;}
比如: font-size: 0.8em; 簡寫: font-size: .8em;
2.1.3 簡寫命名
很多用戶都喜歡簡寫類名,但前提是要人看懂你的命名才能簡寫。
例子:
.navigation{} .atr{} 正確簡寫: #nav{} .author{}
2.1.4 顏色代碼縮寫
color: #eebbcc; 可以寫成: color: #ebc;
2.2. 連字符CSS選擇器命名規範
長名稱或詞組可以使用中橫線來為選擇器命名。不建議使用 “_” 下劃線來命名CSS 選擇器,原因:瀏覽器有兼容性問題,IE6 裏面 _tip 的選擇器命名是無效的。同時也可以區分開js裏面的標量命名。
id在JS是唯一的,不能多吃使用,class類選擇器可以重復使用。另外id的優先級優先於class,所以id應該按需使用。建議:在分模塊布局的時候使用id。
2.4.為選擇器添加狀態前綴
有時候可以給選擇器添加一個表示狀態的前綴,讓語義更明了。
例子:
.withdrawal{ .is-withdrawal{ bacckground-color: #ccc; background-color: #ccc;} }
3、CSS 常用的命名
頭: header
內容:content/container
尾:footer
導航:nav
側欄: sidebar
欄目:column
頁面外圍控制整體寬度:wrapper
左右中: left right left
登錄條:loginbar
標誌: logo
廣告: banner
頁面主體: main
熱點:hot
新聞:news
下載:download
子導航:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權:copyright
滾動:scroll
標簽;tags
文章列表:list
提示信息:msg
欄目標題:title
加入:joinus
指南:guide
服務:server 註
冊:register
狀態:status
投票:vote
合作夥伴:partner
3.1 id的命名:
3.1.1 頁面結構
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
3.1.2 導航
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
3.1.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
3.1.4、id 命名註意事項
1.一律小寫;
2.盡量用英文;
3.不加中槓和下劃線;
4.盡量不縮寫,除非一看就明白的單詞。
4、CSS樣式表文件命名
主要的 master.css
模塊 module.css
基本共用 base.css
布局、版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
css樣式的書寫順序及原理 https://blog.csdn.net/qq_36060786/article/details/79311244
（1）定位屬性：position display float left top right bottom overflow clear z-index
（2）自身屬性：width height padding border margin background
（3）文字樣式：font-family font-size font-style font-weight font-varient color
（4）文本屬性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
（5）css3中新增屬性：content box-shadow border-radius transform……
按照上述1 2 3 4 5的順序進行書寫。
目的：減少瀏覽器reflow（回流），提升瀏覽器渲染dom的性能
原理：瀏覽器的渲染流程為——
①解析html構建dom樹，解析css構建css樹：將html解析成樹形的數據結構，將css解析成樹形的數據結構
②構建render樹：DOM樹和CSS樹合並之後形成的render樹。
③布局render樹：有了render樹，瀏覽器已經知道那些網頁中有哪些節點，各個節點的css定義和以及它們的從屬關系，從而計算出每個節點在屏幕中的位置。
④繪制render樹：按照計算出來的規則，通過顯卡把內容畫在屏幕上。
css樣式解析到顯示至瀏覽器屏幕上就發生在②③④步驟，可見瀏覽器並不是一獲取到css樣式就立馬開始解析而是根據css樣式的書寫順序將之按照dom樹的結構分布render樣式，完成第②步，然後開始遍歷每個樹結點的css樣式進行解析，此時的css樣式的遍歷順序完全是按照之前的書寫順序。在解析過程中，一旦瀏覽器發現某個元素的定位變化影響布局，則需要倒回去重新渲染正如按照這樣的書寫書序：
width: 100px;
height: 100px;
background-color: red ;
position: absolute;
當瀏覽器解析到position的時候突然發現該元素是絕對定位元素需要脫離文檔流，而之前卻是按照普通元素進行解析的，所以不得不重新渲染，解除該元素在文檔中所占位置，然而由於該元素的占位發生變化，其他元素也可能會受到它回流的影響而重新排位。最終導致③步驟花費的時間太久而影響到④步驟的顯示，影響了用戶體驗。
所以規範的的css書寫順序對於文檔渲染來說一定是事半功倍的！
擴展：還有一個會影響瀏覽器渲染性能的詞匯“repaint（重繪）”
repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部布局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變。
註意：
a.render樹的結構不等同於DOM樹的結構，一些設置display:none的節點不會被放在render樹中，但會在dom樹中。
b.有些情況，比如修改了元素的樣式，瀏覽器並不會理科reflow或repaint，而是把這些操作積攢一批，然後做一次reflow，這也叫做異步reflow.但在有些情況下，比如改變窗口，改變頁面默認的字體等，對於這些情況，瀏覽器會馬上進行reflow.
c.為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，並不會等到所有的html都解析完成之後再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容。
CSS書寫規範