HTML、CSS代码规范

1. HTML代码规范

1.1 命名

• class 、 id 必须单词全字母小写，单词间以 - 分隔。
• class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
• 元素 id 必须保证页面唯一。

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="red"></div>

• id 、class 命名，在避免冲突并描述清楚的前提下尽可能短。

<!-- good -->
<div id="nav"></div>
<!-- bad -->
<div id="navigation"></div>

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

• 同一页面，应避免使用相同的 name 与 id
  解释：
  IE 浏览器会混淆元素的 id 和 name 属性， document.getElementById 可能获得不期望的元素。所以在对元素的 id 与 name 属性的命名需要非常小心。

1.2 标签

• 标签名必须使用小写字母。
• 对于无需自闭合的标签，不允许自闭合。
• 解释：
  常见无需自闭合标签有input、br、img、hr等。
• 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。
• 标签使用必须符合标签嵌套规则。
• HTML 标签的使用应该遵循标签的语义。

<!-- good -->
<p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p>

<!-- bad -->
<div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>

1.3 属性

• 属性名必须使用小写字母。

<!-- good -->
<table cellspacing="0">...</table>

<!-- bad -->
<table cellSpacing="0">...</table>

• 属性值必须用双引号包围。
• 布尔类型的属性，建议不添加属性值。

<input type="text" disabled>
<input type="checkbox" value="1" checked>

• 自定义属性建议以 xxx- 为前缀，推荐使用 data-

<ol data-ui-type="Select"></ol>

2. CSS代码规范

2.1 空格

• 选择器 与 { 之间必须包含空格。
• 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
• 列表型属性值 书写在单行时，, 后必须跟一个空格。

font-family: Arial, sans-serif;

2.2 选择器

• 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

• >、+、~ 选择器的两边各保留一个空格。
• 属性选择器中的值必须用双引号包围。

/* good */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

/* bad */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female
}

2.3 属性

• 属性定义必须另起一行。

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

• 属性定义后必须以分号结尾。

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

2.4 选择器

• 如无必要，不得为 id、class 选择器添加类型选择器进行限定。
  解释：
  在性能和维护性上，都有一定的影响。

2.5 属性

• 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
  • Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
  • Box Model 相关属性包括：border / margin / padding / width / height 等
  • Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
  • Visual 相关属性包括：background / color / transition / list-style 等

2.6 值与单位

• 当数值为 0 - 1 之间的小数时，省略整数部分的 0

/* good */
panel {
    opacity: .8;
}

/* bad */
panel {
    opacity: 0.8
}

• 长度为 0 时须省略单位。 (也只有长度单位可省)

/* good */
body {
    padding: 0 5px;
}

/* bad */
body {
    padding: 0px 5px;
}

• 颜色值可以缩写时，必须使用缩写形式。

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

2.7. 常见命名

常见命名1
.wrap 或 .wrapper  用于外侧包裹
.container 或 .ct  包裹容器
.header  用于头部
.body  页面 body
.footer  页面尾部
.aside 或 .sidebar  用于侧边栏
.content 和 .header .footer 对应， 用于主要内容
.navigation  导航元素
.pagination  分页


常见命名2
.tabs > .tab  tab切换
.breadcrumbs  导航列表、面包屑
.dropdown  下拉菜单
.article  文章
.main  用于主体
.thumbnail 头像、小头像
.media  媒体资源
.panel  面板
.tooltip  鼠标放置上去的提示
.popup  鼠标点击弹出的提示


常见命名3
.button 或 .btn  按钮
.ad  广告
.subnav  二级导航
.menu  菜单
.tag  标签
.message 或 .notice  提示消息
.summary  摘要
.logo  logo
.search  搜索框
.login  登陆


常见命名4
.register  注册
.username  用户名
.password  密码
.banner  广告条
.copyright  版权
.modal 或 .dialog  弹窗


常见命名5
var 名字 = {
    状态: [
        'inverse',  相反的、倒转，可以表示反转的状态（reverse）
        'toggled',  拴牢、系紧（绑定 binding）
        'switched',  转换的、开关
        'original',  原始的、原型
        'initial',  最初的
        'identified',  被识别的、被认同者（标识符 identifier）
        'disabled',  残废的，无法使用的，可以表示禁用的状态
        'loading',  载入，可以表示加载的状态
        'pending',  在...期间，可以表示阻塞的状态
        'syncing',  同时发生
        'default'  默认
    ],
    修饰: [
        'dark',  黑暗的、深色的
        'light', 明亮的、浅色的
        'shaded',  色彩较暗的
        'flat',  扁平的
        'ghost',  幽灵，可以用来表示 根据情况展现或消失
        'maroon',  褐红色、孤立的，可以用来表示单独的（孤独 alone）
        'pale',  苍白的、屋里的、暗淡的，可以用来表示 失去某种状态的样子（.popup 好像更贴切）
        'intense', 强烈的、紧张的、热情的，可以用来表示动效多的元素的样子（.active 好像更贴切）
        'twisted', 扭曲的，可以用来表示变形的元素的样子（.transformation 好像更贴切）
        'narrow',  狭窄的、勉强的、有限的
        'wide',  宽的、广阔的、充分的
        'smooth',  顺利的、光滑的
        'separate', 分开的、不同的
        'clean', 清洁的、干净的，可以用来表示 清除状态
        'sharp',  急剧的、锋利的
        'aligned'  对齐的、均衡的
    ],
    元素: [
        'pagination',  标记页数、页码，用于 分页
        'modal',  模式的、情态的，用于 弹窗（对话、回话 dialog）
        'popup',  弹出、发射，用于 鼠标点击弹出的提示，也可以用于弹窗
        'article',  文章
        'story',  故事、小说
        'flash',
        'status',  状态、情形
        'state',  情形
        'media',  媒体
        'block',  块
        'card',  卡片（和 panel 类似）
        'teaser',  戏弄者、强求者
        'badge',  徽章、标记（符号 sign、标签 label、标记 符号 mark）
        'label',  标签
        'sheet',  表
        'poster',  海报、广告（横幅图片 banner、广告 ad）
        'notice',  通知、公告（消息 message）
        'record',  记录、录音
        'entry',  进入、入口、登记
        'item',  条款、项目
        'figure',  计算、出现（计算 calculate）
        'square',  正方形
        'module',  模块、组件
        'bar',
        'button',
        'action',  活动、功能（活跃的 active）
        'knob'  鼓起、突出
    ],
    布局: [
        'navigation',  导航
        'wrapper',  用于外侧包裹（wrap）
        'inner',  内部的
        'header',  头部、页眉
        'footer',  底部、页脚
        'aside',  侧边栏（sidebar）
        'section',  节
        'divider',  除法器、分隔物（使分离 分开 separate）
        'content',  用于主要内容
        'container',  用于包裹容器
        'panel',  面板
        'pane',  也可以用于面板
        'construct',  构造、建造
        'composition',  构成、合成物
        'spacing',  调节间隔
        'frame'  框架
    ]
}

参考链接：
HTML编码规范
CSS编码规范