编码规范

[HarleyWang93]

命名技巧

语义化

• 语义化标签优先

• 基于功能命名、基于内容命名、基于表现命名

• 简略、明了、无后患

HTML规范：

• 用两个空格来代替制表符（tab）

• 嵌套元素应当缩进一次（即两个空格）

• 对于属性的定义，确保全部使用双引号，绝不要使用单引号

• 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5-规范中明确说明这是可选的。

• 不要省略可选的结束标签（closing tag）

• 遵循 HTML 标准和语义，减少标签的数量，尽量避免多余的父元素。

CSS规范：

• 用两个空格来代替制表符（tab）--这是唯一能保证在所有环境下获得一致展现的方法。

• 为了代码的易读性，在每个声明块的左花括号前添加一个空格。

• 换行，声明块的右花括号应当单独成行。

• 每条声明语句的 : 后应该插入一个空格。

• 所有声明语句都应当以分号结尾。

• 对于属性值或颜色参数，省略小于 1 的小数前面的 0（例如，.5 代替 0.5；-.5px 代替 -0.5px）。

• 十六进制值应该全部小写，并采用简写形式，例如#fff

• 为选择器中的属性添加双引号，例如input[type="text"]

• 避免为 0 值指定单位，例如，用 margin: 0;代替margin: 0px;

• 使用简写形式的属性声明，例如margin：15px 16px；代替margin： 15px 16px 15px 16px；

常见命名

.wrap或.wrapper -- 用于外侧包裹
.container或 .ct -- 包裹容器
.header -- 用于头部
.body -- 页面 body
.footer -- 页面尾部
aside、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 -- 弹窗

var 名字 = {
  状态: [
    'inverse',
    'toggled',
    'switched',
    'original',
    'initial',
    'identified',
    'disabled',
    'loading',
    'pending',
    'syncing',
    'default'
  ],
  修饰: [
    'dark',
    'light',
    'shaded',
    'flat',
    'ghost',
    'maroon',
    'pale',
    'intense',
    'twisted',
    'narrow',
    'wide',
    'smooth',
    'separate',
    'clean',
    'sharp',
    'aligned'
  ],
  元素: [
    'pagination',
    'modal',
    'popup',
    'article',
    'story',
    'flash',
    'status',
    'state',
    'media',
    'block',
    'card',
    'teaser',
    'badge',
    'label',
    'sheet',
    'poster',
    'notice',
    'record',
    'entry',
    'item',
    'figure',
    'square',
    'module',
    'bar',
    'button',
    'action',
    'knob'
  ],
  布局: [
    'navigation',
    'wrapper',
    'inner',
    'header',
    'footer',
    'aside',
    'section',
    'divider',
    'content',
    'container',
    'panel',
    'pane',
    'construct',
    'composition',
    'spacing',
    'frame'
  ]
}

推荐阅读

google html css编码规范

bootstrap 编码规范

命名这货真难