火星網校
開發工作者入門：CSS規範總結
作為開發工作者，CSS是必須要掌握的，今天就給大家分享一篇CSS規範總結，一起來看吧！
CSS樣式的權值(權重)
權值等級的定義
第一等：代表內聯樣式，如: style=””，權值為1000。
第二等：代表ID選擇器，如：#content，權值為100。
第三等：代表類，偽類和屬性選擇器，如.content，權值為10。
第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。
Ps:通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，所以他們的權值都為0，!important 優先級最高，萬不得已的情況下才用。
權重計算
#content div#main-content h2=2*100+2*1=202
#content #main-content>h2=2*100+1=201
body #content div[id="main-content"] h2=1*100+1*10+3*1=113
#main-content div.paragraph h2=1*100+1*10+2*1=112
#main-content [class="paragraph"] h2=1*100+1*10+1*1=111
div#main-content div.paragraph h2.first=1*100+2*10+3*1=123
優先規則
權值大的樣式會覆蓋權值小的樣式，上麵例子的樣式會采用權值最大201的樣式，當你亂用!important，特別是後期修改樣式的時候，是不是有種心力憔悴電費感覺？
當css前後樣式項的權值一樣，後麵的樣式會覆蓋前麵的樣式。
CSS規範
命名風格規範
1 css文件命名：統一為小寫的英文字母（盡量少用拚音），如：index.css。
當名字需要組合拚寫時，可以在單詞間加中杠線（不要用下劃線：容易寫錯）。如：member-report.css。（推薦）
或者統一為駝峰式拚寫。如：MemberReport.css (項目啟動前統一風格)。
2 樣式名（html的class名）：在讓人看懂的前提下，盡量語義化或簡寫。盡量少用拚音，和無語義的縮寫 .bt .bd 等； 風格可以統一為小寫字母，如：content。當名字需要組合時，可以采用css文件名的規範。
樣式的繼承
文本樣式
color,font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height，text-align, text-indent, texttransform,word-spacing
列表相關屬性
list-style-image, list-style-position,
list-style-type, list-style,
像素化 css
CSS優化
渲染
就是瀏覽器把HTML代碼以css定義的規則顯示在瀏覽器窗口的過程
瀏覽器對頁麵呈現的處理流程
用戶輸入網址（假設是個html頁麵，並且是第一次訪問），瀏覽器向服務器發出請求，服務器返回html文件；
瀏覽器開始載入html代碼，發現<head>標簽內有一個<link>標簽引用外部CSS文件；
瀏覽器又發出CSS文件的請求，服務器返回這個CSS文件；
瀏覽器繼續載入html中<body>部分的代碼，並且CSS文件已經拿到手了，可以開始渲染頁麵了；
瀏覽器在代碼中發現一個<img>標簽引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後麵的代碼；
服務器返回圖片文件，由於圖片占用了一定麵積，影響了後麵段落的排布，因此瀏覽器要回過頭來重新渲染這部分代碼；
瀏覽器發現了一個包含一行Javascript代碼的<script>標簽，趕快運行它；
Javascript腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個<div> （style.display=”none”）。杯具啊，突然就少了這麼一個元素，瀏覽器不得不重新渲染這部分代碼；
終於等到了</html>的到來，瀏覽器淚流滿麵……
等等，還沒完，用戶點了一下界麵中的“換膚”按鈕，Javascript讓瀏覽器換了一下<link>標簽的CSS路徑；
瀏覽器召集了在座的各位<div><span><ul><li>們，“大夥兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請求了新的CSS文件，重新渲染頁麵。
回流
當頁麵的布局發生變化時，瀏覽器會回過頭來重新渲染，這就是頁麵為什麼會慢的一個原因，當一個點的變 化影響了布局，這就會使得要倒回去重新渲染，這個倒回去的過程稱為 reflow（回流）。
當頁麵布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流
添加或者刪除可見的DOM元素；
元素位置改變和計算（offsetWidth 和 offsetHeight）
元素尺寸改變——邊距、填充、邊框、寬度和高度
內容改變——比如文本改變或者圖片大小改變，字體的改變而引起的計算值寬度和高度改變；
頁麵渲染初始化
瀏覽器窗口尺寸改變——resize事件發生時；
操作 class 屬性，腳本操作 DOM，設置 style 屬性的值，激活 CSS 偽類
var s = document.body.style;
s.padding = "2px"; // 回流+重繪
s.border = "1px solid red"; // 再一次 回流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 回流+重繪
// 添加node，再一次 回流+重繪
document.body.appendChild(document.createTextNode('abc!'));
回流比重繪的代價要更高，回流的花銷跟render tree有多少節點需要重新構建有關係，假設你直接操作body，比如在body最前麵插入1個元素，會導致整個render tree回流，這樣代價當然會比較高，但如果是指body後麵插入1個元素，則不會影響前麵元素的回流。
reflow問題也是可以優化的，減少reflow是很有必要的，比如給圖片設定好寬度和高度，這樣就可以把圖片的占位麵積預定好。
重繪
一些元素需要更新屬性，而這些屬性隻是影響元素的外觀，風格（景顏色，文字顏色，邊框顏色）而不會影響布局，瀏覽器就會repaint。repaint的速度明顯比reflow的速度快。
為了幫助小夥伴們更好的學習WEB前端，技術學派整理了WEB前端的相關學習視頻及學習路線圖。
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
想要製作自己的手機遊戲嗎？火星時代教育讓您實現此目標！理論學習與實戰操作相結合，我們的專業課程將帶您逐步掌握手機遊戲製作的精髓。
-
了解影視後期技能培訓學校的重要性，以及火星時代教育如何幫助你成為創意工業的精英。
-
詳解影視概念培訓的收費模式與注意事項，以及火星時代教育在此領域的優勢和服務介紹。
-
火星時代教育為您詳盡介紹UI設計課程培訓價格，助你快速掌握UI設計技能，提升職場競爭力
-
揭示UE界麵設計的關鍵技術與實踐應用，探究如何運用設計思維和工具提升產品用戶體驗。火星時代，引領教育創新。
-
若你想浸入影視動畫行業，挑選一所優質的專業培訓機構至關重要。從專業設施、師資力量到畢業生就業，火星時代教育與眾不同，是靠譜的影......
