css编码规范

命名技巧

1. 标签语义化

• 语义化标签优先
• 基于功能命名，基于内容命名，基于表现命名
• 简略，明了，无后患

2. 命名规则

• 所有命名都使用英文小写
• 命名用引号包裹
• 用中横线连接
• 命名体现功能，不涉及表现样式（颜色、字体、边框、背景等）

3. 常见命名

• .wrap或.wrapper：用于外侧包裹
• .container或.ct：包裹容器
• .header：用于头部
• .body：页面body
• .footer：页面尾部
• asider或sidebar：用于侧边栏
• .content：和header / footer对应，主要用于内容
• .navigation：导航元素
• .pagination：分页
• .tabs > .tab：tab切换
• .breadcrumbs：导航列表、面包屑
• .dropdown：下拉菜单
• .article：文章
• .main：用于主体
• .thumbnail：头像，小图像
• .media：媒体资源
• .panel：面板
• .tooltip：鼠标放置上去的提示
• .popup：鼠标点击弹出的提示
• .button / .btn：按钮
• .ad： 广告
• .subnav：二级导航
• .menu：菜单
• .tag：标签
• .message / .notice：提示消息
• .summary：摘要
• .logo：logo
• .search：搜索框
• .login：登录
• .register ：注册
• .username ：用户名
• .password：密码
• .banner ： 广告条
• .copyright ：版权
• .modal或者 .dialog ：弹窗

CSS规范

1. 书写规范

• tab用两个空格表示
• CSS的:后加一个空格，{前加一个空格
• 每条声明后面都加上;
• 换行，而不是放到一行
• 颜色用小写，用缩写#fff
• 小数不用写前缀.5s
• 尽量缩写margin: 10px 10px 10px 10px; > margin: 10px;

2. 声明顺序

• 相关的属性声明应当归为一组，并按照下面的顺序排列
  position：位置相关
  box model：盒模型相关
  typographica：字体颜色相关
  visual：视觉相关