如何編寫高效率額css程式碼簡單介紹
本章節就羅列一下在寫css程式碼中需要注意的事項,這些事項可以提高css程式碼的效能。
下面就進入正題,感興趣的朋友可以做一下參考:
一.把CSS放在HTML頁面頭部:
頁面的渲染需要在css程式碼完全載入完畢之後,所以需要將css程式碼放在網頁的頭部,能夠提高效率。
@import相當於把標籤放在頁面的底部,因此從優化效能的角度考慮,應避免使用@import。
二.儘可能少的使用CSS Expressions:
此表示式只有低版本的IE瀏覽器支援。
但是此表示式內部執行非常的繁瑣,並且進行頁面微小的調整或者操作都可能有大量的操作執行,所以效率不過。
三.儘可能簡寫屬性或者屬性值:
有血css屬性或者屬性值能夠實現簡寫,看如下程式碼:
[CSS] 純文字檢視 複製程式碼color: #eebbcc;
上面程式碼可以簡寫如下:
[CSS] 純文字檢視 複製程式碼color: #ebc;
儘量使用複合屬性的寫法,將程式碼合成一條:
[CSS] 純文字檢視 複製程式碼margin-top:2px; margin-right:5px; margin-bottom:2em; margin-left:15px;
程式碼可以簡寫成如下形式:
[CSS] 純文字檢視 複製程式碼margin:2px 5px 2em 15px;
儘量將重複的地方抽取出來,程式碼如下:
[CSS] 純文字檢視 複製程式碼.class1{position: absolute; left: 20px; top: 30px;} .class2{position: absolute; left: 20px; top: 30px;} .class3{position: absolute; left: 20px; top: 30px;} .class4{position: absolute; left: 20px; top: 30px;} .class5{position: absolute; left: 20px; top: 30px;} .class6{position: absolute; left: 20px; top: 30px;}
提取如下:
[CSS] 純文字檢視 複製程式碼.class1 ,.class2 ,.class3 ,.class4 ,.class5 ,.class6{ Position: absolute; left: 20px; top: 20px; }
四.只是用小寫形式:
標籤和css程式碼都要使用小寫:
[HTML] 純文字檢視 複製程式碼<A HREF="http://www.softwhy.com">螞蟻部落</A>
程式碼修改如下:
[HTML] 純文字檢視 複製程式碼<a href="http://www.softwhy.com">螞蟻部落</a>
五.使用HTML5文件型別:
使用HTML5文件型別,起碼能夠節省很多字元:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html>
六.儘量少用HTML字元實體:
當然有些情況是無法避免的,這就沒辦法了。
關於HTML字元實體可以參閱HTML字元實體簡單介紹一章節。
七.使用語義化的id和class選擇器名稱:
使用語義化的選擇器名稱可以便於閱讀,對合作開發或者後續的修改都有很大的好處,例如:
[CSS] 純文字檢視 複製程式碼.button-green {} #login {}
八.將值是零的單位省略:
將0值單位省略,如下程式碼:
[CSS] 純文字檢視 複製程式碼margin:0px; /*修改為如下:*/ margin:0;
九.省略數字的起始0:
將數字的起始0省略,程式碼如下:
[CSS] 純文字檢視 複製程式碼font-size:0.8em; /*修改為如下:*/ font-size:.8em;
十.慎重使用選擇器:
可能實現同樣的效果,執行效率可能會不同所以要謹慎使用選擇器。
相關內容可以參閱css選擇器的解析順序簡單介紹一章節。
相關文章
- CSS 簡單介紹CSS
- SVG程式碼構成簡單介紹SVG
- 編寫簡單的Java程式碼:HelloWoridJava
- 如何編寫簡潔的程式碼?
- 簡單介紹如何使用Bazel構建Golang程式Golang
- 簡單介紹python程式設計之檔案讀寫Python程式設計
- [譯]WebAssembly: 帶有程式碼示例的簡單介紹Web
- groovy 程式語言簡單介紹
- CSS尺寸單位介紹CSS
- iOS 編寫高質量Objective-C程式碼(一)—— 簡介iOSObjectC程式
- RPC簡單介紹RPC
- Python簡單介紹Python
- KVM簡單介紹
- RMI簡單介紹
- HTML簡單介紹HTML
- HTML 簡單介紹HTML
- JavaScript 簡單介紹JavaScript
- ajax簡單介紹
- SVG簡單介紹SVG
- Clickjacking簡單介紹
- 【Pandas】簡單介紹
- Map簡單介紹
- JSON簡單介紹JSON
- ActiveMQ簡單介紹MQ
- 流程編排、如此簡單-通用流程編排元件JDEasyFlow介紹元件
- 簡單介紹正規表示式拆分url例項程式碼
- Unicode編碼介紹Unicode
- 如何寫好測試用例以及go單元測試工具testify簡單介紹Go
- Git_簡單介紹Git
- jQuery Validate簡單介紹jQuery
- JSON物件簡單介紹JSON物件
- <svg>元素簡單介紹SVG
- 簡單介紹 ldd 命令
- 禪道簡單介紹
- Webpack 的簡單介紹Web
- Apache Curator簡單介紹Apache
- spark簡單介紹(一)Spark
- Flutter key簡單介紹Flutter
- 簡單介紹克隆 JavaScriptJavaScript