最初,在编写CSS的时候,我们往往想到哪儿就写到哪儿,它们之间的关联性和有序性并不在考虑之中。但随着代码量的增加,亦或是多人共同开发,CSS的编写规范变得重要起来了。本文通过三个方面,总结出CSS编写的最佳实践。一来强制自己按照规范编写CSS,二来可以推广到团队使用。
层级规范(从高到低)
- Popout
- Mask
- Navigation
- Content
书写规范
- 小写、英文
- tab四个空格缩进
- 以'-'短横杠连接名词
- 为选择器添加状态前缀(.is-xxx)
- 关于空格的使用
- 选择器与{之间有空格
- 属性名后要有空格
- 关于选择器
- 每个选择器占一行
- 不要随意使用id选择器,id的优先级高于class
- 关于样式
- 链接的样式a:link->a:visited->a:hover->a:active
- 去掉小数点之前的0
- 统一0后面就不要加单位啦
书写顺序
CSS书写顺序遵循优先定位、盒模型次之、其他再次之
- 位置属性(position, top, right, z-index, display, float...)
- 大小(width, height, padding, margin)
- 文字系列(font, line-height, letter-spacing, color, text-align...)
- 背景(background, border...)
- 其他(animation, transition...)
CSS样式表文件命名
- 主要的 master.css
- 模块 module.css
- 基本共用 base.css
- 布局、版面 layout.css
- 主题 themes.css
- 专栏 columns.css
- 文字 font.css
- 表单 forms.css
- 补丁 mend.css
- 打印 print.css
常用CSS命名规则
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体佈局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签:tags
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner