css编写规范最佳实践

最初,在编写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书写顺序遵循优先定位、盒模型次之、其他再次之

  1. 位置属性(position, top, right, z-index, display, float...)
  2. 大小(width, height, padding, margin)
  3. 文字系列(font, line-height, letter-spacing, color, text-align...)
  4. 背景(background, border...)
  5. 其他(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

原文地址:https://www.cnblogs.com/fayin/p/6610744.html