CSS文件结构组织
来源:互联网 发布:windows 纯净 下载 编辑:程序博客网 时间:2024/05/20 16:42
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命名准则/方法
0 0
- CSS文件结构组织
- Web项目的CSS文件结构组织及属性编写
- Wave文件的组织结构
- class文件基本组织结构
- 1.1、class文件基本组织结构
- 组织结构
- 组织结构
- 组织结构树形结构
- android 系统 makefile文件(Android.mk)组织结构
- android 系统 makefile文件(Android.mk)组织结构 .
- android 系统 makefile文件(Android.mk)组织结构
- Android 系统 makefile文件(Android.mk)组织结构
- android 系统 makefile文件(Android.mk)组织结构
- android 系统 makefile文件(Android.mk)组织结构
- android 系统 makefile文件(Android.mk)组织结构
- android 系统 makefile文件(Android.mk)组织结构
- Android系统makefile文件(Android.mk)组织结构
- android 系统 makefile文件(Android.mk)组织结构 .
- Foundation框架精选
- 二进制(23)
- 0044 MySQL Workbench 入门教程
- 运行 React Native 的开源工程
- 看图识“字”(14)- 数值显示为角度
- CSS文件结构组织
- 把23转化为2进制
- myBatis的批量插入数据总结
- BST相关代码
- 错误积累
- iOS远程推送
- 关于等待事件enq: TX - allocate ITL entry的一次故障处理
- 看图识“字”(15)-站点图
- 二进制