CSS编码规范

---

命名技巧

• 语义化
  • 语义化的标签优先
  • 语义功能命名，语义内容命名
• 命名范例
  • 所有命名都用英文小写
  • 命名用引号包裹
  • 命名体现功能，尽量不涉及表现样式

  .wrap/.wrapper 用于外侧包裹
  .container或.ct 用于容器
  .header 用于头部
  .footer 用于页脚
  .aside/.sidebar 用于侧边栏
  .navigation 用于导航栏
  .pagination 用于分页
  .breadcrumbs 用于面包屑、导航列表
  .dropdown 用于下拉列表
  .thumbnail 用于头像，小图标
  .media 用于媒体资源
  .panel 用于面板
  .tooltip 鼠标放上去的提示
  .popup 鼠标按下去后弹出的提示
  .button/.btn 按钮
  .ad 广告
  .subnav 二级导航
  .menu 菜单
  .tag 标签
  .message/.notice 提示消息
  .summary 摘要
  .logo
  .search 搜索框
  .login 登录
  .register 注册
  .username 用户名
  .password 密码
  .banner 广告条
  .copyright 版权
  .modal/.dialog 弹窗

书写规范

• tab用2个空格表示
• css的{前及属性的：后加空格
• 每条声明后都加上分号
• 不同选择器及属性分行写
• 颜色用小写、缩写
• 小数不用写前缀，如“0.5”写成“.5”，0不用加单位
• 尽量缩写，如margin：0 10px 0 10px，写成margin：0 10px
• 声明顺序：
  • positioning：如position
  • Box model：如display，margin，padding等
  • Typographic：如字体
  • Visual：如颜色样式等