CSS樣式書寫順序和命名規(guī)范及注意事項(xiàng)
書寫順序的意義
減少瀏覽器reflow(回流),提升瀏覽器渲染dom的性能
①:解析html構(gòu)建dom樹,解析css構(gòu)建css樹:將html解析成樹形的數(shù)據(jù)結(jié)構(gòu),將css解析成樹形的數(shù)據(jù)結(jié)構(gòu)
②:構(gòu)建render樹:DOM樹和CSS樹合并之后形成的render樹。
③:布局render樹:有了render樹,瀏覽器已經(jīng)知道那些網(wǎng)頁中有哪些節(jié)點(diǎn),各個(gè)節(jié)點(diǎn)的css定義和以及它們的從屬關(guān)系,從而計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。
④:繪制render樹:按照計(jì)算出來的規(guī)則,通過顯卡把內(nèi)容畫在屏幕上。
css樣式解析到顯示至瀏覽器屏幕上就發(fā)生在②③④步驟,可見瀏覽器并不是一獲取到css樣式就立馬開始解析而是根據(jù)css樣式的書寫順序?qū)⒅凑誨om樹的結(jié)構(gòu)分布render樣式,完成第②步,然后開始遍歷每個(gè)樹結(jié)點(diǎn)的css樣式進(jìn)行解析,此時(shí)的css樣式的遍歷順序完全是按照之前的書寫順序。
優(yōu)先級(jí)第一--定位屬性:
{
display 規(guī)定元素應(yīng)該生成的框的類型。
position 定位規(guī)定元素的定位類型。
float 規(guī)定框是否應(yīng)該浮動(dòng)。
left
top
right
bottom
overflow 規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。
clear 清除
z-index 設(shè)置元素的堆疊順序。
content 內(nèi)容
list-style
visibility 可見性/顯示
}
優(yōu)先級(jí)第二--自身屬性:
{
width
height
border
padding
margin
background
}
優(yōu)先級(jí)第三--文字樣式:
{
font-family
font-size
font-style 規(guī)定文本的字體樣式。
font-weight
font-varient 規(guī)定是否以小型大寫字母的字體顯示文本
color
}
優(yōu)先級(jí)第四--文本屬性:
{
text-align 規(guī)定文本的水平對(duì)齊方式。
vertical-align 設(shè)置元素的垂直對(duì)齊方式。
text-wrap 規(guī)定文本的換行規(guī)則。
text-transform 控制文本的大小寫。
text-indent 規(guī)定文本塊首行的縮進(jìn)。
text-decoration 規(guī)定添加到文本的裝飾效果。
letter-spacing 設(shè)置字符間距。
word-spacing 設(shè)置單詞間距。
white-space 規(guī)定如何處理元素中的空白。
text-overflow 規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。
}
優(yōu)先級(jí)第五--CC3中新增屬性:
{
box-shadow 向方框添加一個(gè)或多個(gè)陰影。
cursor 規(guī)定要顯示的光標(biāo)的類型(形狀)。
border-radius
background:linear-gradient
transform…… 向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。
}
CSS代碼的命名規(guī)范
- 必須以字母開頭命名選擇器,這樣可保證在所有瀏覽器下都能兼容;
- 不允許單個(gè)字母的類選擇器出現(xiàn);
- 不允許命名帶有廣告等英文的單詞,例如ad,adv,adver,advertising,已防止該模塊被瀏覽器當(dāng)成垃圾廣告過濾掉。任何文件的命名均如此。
- 下劃線 ’ _ ’ 禁止出現(xiàn)在class命名中,全小寫,統(tǒng)一使用’-‘連字符.
- 禁止駝峰命名 className
- 見名知意
CSS代碼注意事項(xiàng)
- 不要以完全沒有語義的標(biāo)簽作為選擇器,這會(huì)造成大面積污染
- 簡寫CSS顏色屬性值
- 刪除CSS屬性值為0的單位
- 刪除無用CSS樣式
- 為單個(gè)CSS選擇器或新申明開啟新行
- 避免過度簡寫 , .ico足夠表示這是一個(gè)圖標(biāo) , 而.i不代表任何意思
- 使用有意義的名稱,使用結(jié)構(gòu)化或者作用目標(biāo)相關(guān)的,而不是抽象的名稱
總結(jié)
到此這篇關(guān)于CSS樣式書寫順序和命名規(guī)范的文章就介紹到這了,更多相關(guān)css書寫順序命令規(guī)范內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了CSS使用BEM命名規(guī)范實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-28
值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-10-19
好的 CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間
Debug CSS 是一種很耗時(shí)的操作,如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。下面通過本文給大家?guī)砹薈SS 命名規(guī)范可以節(jié)約 Debug 時(shí)間的相關(guān)知識(shí),感興趣的朋友一起2018-01-23css 命名:BEM, scoped css, css modules 與 css-in-js詳解
這篇文章主要介紹了css 命名:BEM, scoped css, css modules 與 css-in-js的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,,需要的朋友2020-08-24
CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解
這篇文章主要介紹了CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-28- BEM的意思就是塊(block)、元素(element)、修飾符(modifier),是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。本文主要介紹了詳解css BEM書寫規(guī)范,非常具有實(shí)用價(jià)值,需要的2018-12-17

從QQtabBar看css命名規(guī)范BEM的詳細(xì)介紹
這篇文章主要介紹了從QQtabBar看css命名規(guī)范BEM的問題解析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-08-04




