最近的工作中,遇到不少問題,其中一個問題我覺得是最重要的,那就是css的書寫順序,他可以體現一個前端工作者的思續。如果您看到本文,請不要再想到哪個屬性就寫哪個屬性。 
先來看一下firefox推薦的書寫順序 
* mozilla.org Base Styles 
* maintained by fantasai 
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup) 
*/ 
/* Suggested order: 
//顯示屬性 
* display 
* list-style 
* position 
* float 
* clear 
//自身屬性 
* width 
* height 
* margin 
* padding 
* border 
* background 
//文本屬性 
* color 
* font 
* text-decoration 
* text-align 
* vertical-align 
* white-space 
* other text 
* content 
* 
*/  
從上面推薦的順序可以看出,非常的有條理。上面推薦的順序并沒有把更加詳細的屬性寫進去,比如:top,right,bottom,left等,也許有人會問,這樣些對性能有什么影響嗎?我非常遺憾的告訴你,我也不知道,但我想,有條理的做事才是正確的(也許你有更好的方法)。 
我的理解: 
1.顯示屬性:display||visibility||list-style(list-style-type、list-style-image、list-style-position)||overflow 
2.定位及浮動屬性:position||top||right||bottom||left||float||clear 
3.盒模型:width||height||margin||padding||border 
4.背景:background(background-image、background-position、background-repeat、background-attachment) 
5.文字屬性:font-style||font-variant||font-weight||font-size||font-family||color 
6.文本屬性:text-indent||text-align||vertical-align||letter-spacing||word-spacing||text-transform||text-decoration||text-shadow 
7.其它 
引用某位人的話,”不管你用不用這個順序,反正我是用了”。歡迎大家指正
新聞熱點
疑難解答