css寫作建議和效能優化小結 | css效能
1.前言還有幾天就到國慶中秋了,快要放假了,先祝大家節日快樂!之前寫過js的寫作建議和技巧,那麼今天就來聊聊css吧!說到css,每一個網頁都離不開css,但是對於css,很多開發者的想法就是,css只要能用來佈局,把效果圖排出來就可以了,其它的細節或者優化,不需要怎麼考慮。但是我覺得css可不只是把頁面的佈局完成就是完事的,還需要考慮很多細節有優化,更不會像大家想得那麼簡單,在學習當中,如果發現什麼技巧或者優化的點,我也會學以致用!那麼今天,就分享下我總結的css寫作建議和效能優化的一些問題!希望能幫讓大家對神奇...
1.前言還有幾天就到國慶中秋了,快要放假了,先祝大家節日快樂!之前寫過js的寫作建議和技巧,那麼今天就來聊聊css吧!說到css,每一個網頁都離不開css,但是對於css,很多開發者的想法就是,css只要能用來佈局,把效果圖排出來就可以了,其它的細節或者優化,不需要怎麼考慮。但是我覺得css可不只是把頁面的佈局完成就是完事的,還需要考慮很多細節有優化,更不會像大家想得那麼簡單,在學習當中,如果發現什麼技巧或者優化的點,我也會學以致用!那麼今天,就分享下我總結的css寫作建議和效能優化的一些問題!希望能幫讓大家對神奇的css有一個新認識,當然,如果大家覺得還有什麼其它的建議。歡迎指點!
2.css渲染規則首選,關於css渲染的規則,大家可能都知道,是從右到左的渲染!如下栗子
.nav h3 a{font-size: 14px;}渲染過程大概是:首先找到所有的a,沿著a的父元素查詢h3,然後再沿著h3,查詢.nav。中途找到了符合匹配規則的節點就加入結果集。如果找到根元素html都沒有匹配,則不再遍歷這條路徑,從下一個a開始重複這個查詢匹配(只要頁面上有多個最右節點為a)。參考:CSS選擇器從右向左的匹配規則[1]
3.巢狀層級不要超過3級一般情況下,元素的巢狀層級不能超過3級,過度的巢狀會導致程式碼變得臃腫,沉餘,複雜。導致css檔案體積變大,造成效能浪費,影響渲染的速度!而且過於依賴HTML文件結構。這樣的css樣式,維護起來,極度麻煩,如果以後要修改樣式,可能要使用!important覆蓋。
4.樣式重置這個我目前保持中立意見,因為看著網上的文章,有些人支援使用樣式重置,有些人不支援使用,誰也說服不了誰。我自己的情況,我有使用樣式重置,但是是比較簡單的一個總結,程式碼如下!
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } ol, ul { list-style: none; } h1{ font-size: 24px; } h2{ font-size: 20px; } h3{ font-size: 18px; } h4 {...