CSS文件结构组织

阳光穿透心脏的1/2处 2022-08-21 11:40 182阅读 0赞

## CSS文件结构组织 ##

1、基础（重置和默认）样式。统一浏览器差异， 设置部分标签的初始样式；  
2、框架样式。网页布局结构；  
3、功能辅助类Utility样式。浮动、清除浮动、定位、内外边距、字体家族及粗细、文本对齐；  
4、元素元件样式。按钮、输入框、loading、图标等；  
5、页面组件和模块样式。导航、登录、注册、各种列表、评论、搜索、分页、面包屑导航等；  
6、业务类样式。具体页面、嵌入式应用。  
7、特殊功能、颜色和背景样式。字体颜色、字体大小、背景、几何图形…特殊功能、颜色和背景等，根据项目，或单独作一文件，或并入具体页面。

## 基本排版规范 ##

小写、单行、多行选择器用逗号分行、每属性分号分割、单引号、缩进；

## 选择器内属性的顺序和组织 ##

不建议按字母排序，一是书写和维护起来不方便，二是属性缺乏逻辑性  
  
影响文档流的属性（display, position, float, clear, visibility, table-layout）  
自身盒模型的属性（width, height, margin, padding, border）  
排版相关属性（font, line-height, text-align, text-indent, vertical-align）  
装饰性属性（color, background, opacity, cursor）  
生成内容的属性（content, list-style, quotes）  
CSS3属性：transform/transition/animation/box-shadow/border-radius  
加浏览器前缀，按照 -webkit- / -moz- / -ms- / -o- / std的顺序，标准属性写在最后。

[Demo][]

## 注意项 ##

不过度嵌套选择符，减少重复冗余；  
样式命名不要过简，避免各种冲突；  
命名要有语义，方便阅读和维护；  
根据Web标准和规则，结合项目实践，和团队约定，无绝对标准。

# 参考 #

[规范 - NEC : 更好的CSS样式解决方案][- NEC _ _CSS]  
[ClassName的长命名 VS. 短命名][ClassName_ VS.]  
[ITeye：前端 CSS 规范大全][ITeye_ CSS]  
[mozilla: CSS  Suggested order][mozilla_ CSS_ Suggested order]  
[How do you order your properties within a declaration block?][How do you order your properties within a declaration block]  
[需警惕CSS3属性的书写顺序][CSS3]  
[稳定、地道HTML书写原则][HTML]  
[精简高效的CSS命名准则/方法][CSS]

[Demo]: http://blog.csdn.net/xianghongai/article/details/44239237
[- NEC _ _CSS]: http://nec.netease.com/standard
[ClassName_ VS.]: http://ued.taobao.org/blog/2009/11/classname-long-vs-short/
[ITeye_ CSS]: http://www.iteye.com/news/27577
[mozilla_ CSS_ Suggested order]: https://www.mozilla.org/css/base/content.css
[How do you order your properties within a declaration block]: http://www.sitepoint.com/forums/showthread.php?598449-How-do-you-order-your-properties-within-a-declaration-block
[CSS3]: http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/
[HTML]: http://www.zhangxinxu.com/wordpress/2013/01/principles-writing-consistent-idiomatic-html/
[CSS]: http://www.zhangxinxu.com/wordpress/2010/09/%e7%b2%be%e7%ae%80%e9%ab%98%e6%95%88%e7%9a%84css%e5%91%bd%e5%90%8d%e5%87%86%e5%88%99%e6%96%b9%e6%b3%95/