css代码规范

• CSS选择器

- 通配符
- 元素/标签
- id
- class
- 后代选择器
- 子选择器( > )
- 相邻兄弟元素选择器( + )
- 分组( , )

• CSS执行顺序

外部样式
内部样式
内联样式
important

// 层叠次序
浏览器缺省 < 外部 < 内部 < 内联 < important

• CSS书写顺序

// 位置/显示属性
position,  内容生成(content),  list-style, display,   float,   clear,  overflow  rotation  flex box  z-index ..
// 自身属性
width,  height,  margin,  padding,  边框(border&outline),  背景(background)  ..
// 文字属性
font,  color,  hyperline属性,  text-decoration,  text-align,  vertical-align  ..
// 其他
动画(animation),  transform,  transition,  zoom

/******************************************************************************/
// 部分属性顺序
pading&margin
    上  右  下  左
    上  右左  下
    上下  右左
    上右下左
font
    font-style  // 字体样式
    font-variant // 大写字母样式
    font-weight  // 字体粗细
    font-size/line-height  // 大小/行高
    font-family  // 字体
font: italic small-caps 700 16px/1.7 "yahei"  // font-size和font-family必需

background
    background-color  //  颜色
    background-image  //  图片
    background-repeat  //  重复方式
    background-attachment  //固定or滚动
    background-position/background-size  //  位置/尺寸
    background-origin  //  定位区域
    background-clip  //  绘制区域(裁减)
background: #fefefe url('...') repeat-x 20px center/20px content-box

animation
    animation-name  //  keyframe名称
    animation-duration  //  持续时间
    animation-timing-function  //  速度曲线
    animation-delay  //  开始延迟
    animation-iteration-count  //  播放次数
    animation-direction  //  播放方向
animation: animate  5s ease-in-out 3s 2 linear

transition
    transition-property  //  过渡效果名称
    transtion-duration  //  过渡持续时间
    transition-timing-function  //  速度曲线
    transition-delay  //  开始延迟
transition: wide 5s ease-in 2s

• CSS规范

1. 去掉小数点前的0
2. id不滥用
3. 使用连字符"-"而不使用下划线"_"
4. 16进制颜色代码缩写
5. 表示状态加前缀".is-"
6. 命名简写易懂

• CSS命名规则

- 具体使用根据层级省略
// 布局
wrapper/page  // 页面
  status-bar  // 状态栏
  header  // 页眉
    nav  // 导航
  container  // 主体
    sidebar  // 侧边栏
    content  // 内容主体
footer  // 页脚
left right center  // 定位

// 颜色
bg-color  // 背景色
bs-color  // 主体色
error  // 错误红
warning  // 警告黄
success  // 成功绿
xxx/spc-xxx  // 指定色(xxx为颜色的英语单词)

// 图标字体
icon  // 统一前缀
icon-xxx  // xxx为图标名称

// 特定组件
logo  // 标志
banner  // 告示
  banner-item  // 告示子项
carousel  // 轮播
  carousel-item  // 轮播子项
hot  // 热点
news  // 新闻
download  // 下载
upload  // 上传
menu  // 菜单
  menu-item  // 菜单子项
  sub-menu  // 子菜单
search  // 搜索
list  // 列表
  list-item  // 列表子项
friend-link  // 友链
copyright // 版权
tag  // 标签
msg  // 提示信息
tips  // 小贴士
guide  // 引导
status-xxx  // 状态
article  // 文章
  title  // 标题
  summary  // 简述
  content  // 内容
img-xxx  // 图片
link-xxx  // 链接
tab  // 标签页
  tab-item  // 标签子项
btn  // 按钮统一前缀
  btn-xxx  // 特定按钮
top  // 回到顶部
close  // 关闭
row // 行
text-xxx  // 文字相关
pull-right  // float: right

// 导航
nav  // 导航标记
  nav-bar  // 导航
sidebar  // 侧边栏
// 功能
lg-box  // 登录
  lg-header
  lg-body
  lg-footer
is-xxx  // 状态标记
card  // 卡片
  card-item // 子项
    item-img // 图片
    item-title // 标题
    item-desc // 描述
popover  // 弹出框
tool-tip  // 文字提示
dialog  // 对话框
  dialog-title  // 标题
  dialog-body  // 内容主体
  dialog-footer // 页脚
steps  // 步骤条/时间轴
dropmenu  // 下拉菜单
  menu-item // 菜单子项
loading  // 加载中...
msg-box  // 消息框
badge  // 标记
tree  // 树形菜单
  tree-item // 菜单子项
progress  // 进度条
rate  // 评分
  rate-item  // 评分子项
slider  // 滑块
switch  // 开关

• 语义化
  当清除所有自定义的样式与布局，只使用浏览器默认缺省值时，采用语义标签，使得页面结构清晰易读。h5语义化标签：

(图片来源：http://www.html5jscss.com/html5-semantics-section.html)