前端 CSS 规范大全
文章整理了Web前端开发中的各种CSS规范,包括文件规范、注释规范、命名规范、书写规范、测试规范等。
一、文件规范
1、文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解):
所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:
link和style标签都应该放入head中,原则上,不允许在html上直接写样式。避免在CSS中使用@import,嵌套不要超过一层。
1、文件顶部注释(推荐使用)
Css代码
一、文件规范
1、文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解):
所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:
- 基本样式库 /css/core
- 通用UI元素样式库 /css/lib
- JS组件相关样式库 /css/ui
- 读书 /css/book/
- 电影 /css/movie/
- 音乐 /css/music/
- 社区 /css/sns/
- 小站 /css/site/
- 同城 /css/location/
- 电台 /css/radio/
- util-01 reset /css/core/reset.css
- util-02 通用模块容器 /css/core/mod.css
- ui-01. 喜欢按钮 /css/core/fav_btn.css
- ui-02. 视频/相册列表项 /css/core/media_item.css
- ui-03. 评星 /css/core/rating.css
- ui-04. 通用按钮 /css/core/common_button.css
- ui-05. 分页 /css/core/pagination.css
- ui-06. 推荐按钮 /css/core/rec_btn.css
- ui-07. 老版对话框 /css/core/old_dialog.css
- ui-08. 老版Tab /css/core/old_tab.css
- ui-09. 老版成员列表 /css/core/old_userlist.css
- ui-10. 老版信息区 /css/core/notify.css
- ui-11. 社区用户导航 /css/core/profile_nav.css
- ui-12. 当前大社区导航 /css/core/site_nav.css
- ui-13. 加载中 /css/lib/loading.css
link和style标签都应该放入head中,原则上,不允许在html上直接写样式。避免在CSS中使用@import,嵌套不要超过一层。
- 外联方式:<link rel=”stylesheet” href=”…” />(类型声明type=”text/css”可以省略)
- 内联方式:<style>…</style> (类型声明type=”text/css”可以省略)
- 文件名必须由小写字母、数字、中划线组成
- 文件必须用UTF-8编码,使用UTF-8(非BOM),在HTML中指定UTF-8编码,在CSS中则不需要特别指定因为默认就是UTF-8。
- 单个CSS文件避免过大(建议少于300行)
1、文件顶部注释(推荐使用)
Css代码
上一篇:CSS制作面包屑
下一篇:基于Edge Animate可视化工具开发CSS3动画
﹝前端 CSS 规范大全﹞相关内容
- Google推荐的15条军规:HTML5代码规范
- 历时三年W3C宣布HTML5规范正式定稿
- HTML5:新一代的网页规范终于完成
- HTML5的规范开发确立或带来移动互联新契机
- 浅谈JavaScript编程语言的编码规范
- 最新HTML5.1规范元素表
- 前端代码标准最佳实践:CSS篇
- WEB前端使用的CSS3选择器
- web前端css定位position和浮动float
- 10款重量级CSS3的全新特效 实现绚丽前端动画效果