CSS文件结构组织

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样式解决方案

ClassName的长命名 VS. 短命名

ITeye：前端 CSS 规范大全

mozilla: CSS Suggested order

How
do you order your properties within a declaration block?

需警惕CSS3属性的书写顺序

稳定、地道HTML书写原则

精简高效的CSS命名准则/方法