css规范

#样式属性顺序

单个样式规则下的属性在书写时，应按功能进行分组，组之间需要有一个空行。同时要以Positioning Model > Box Model > Typographic > Visual的顺序书写，提高代码的可读性。
- Positioning Model 布局方式，位置，相关属性包括：position，top，z-index，display，float等。
- Box Model 盒子模型，相关属性包括：width，height，margin，padding，border，overflow等。
- Typographic 文本排版，相关属性包括：font，line-height，text-align等。
- Visual 视觉外观，相关属性包括：color，background，list-style，transform，animation等。

#class命名规范

分类式命名法(在前端组件优化下尤为重要)

布局(grid)(.g-):将页面分割为几大块，通常有头部，主体，主栏，侧栏，尾部等。
- 模块(module)(.m-):通常是一个语义化可以重复使用的较大的整体，比如导航，登录，注册等。
- 元件(unit)(.u-):通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中，例如按钮，输入框。
- 功能(function)(.f-):为了方便一些常用样式的使用，我们将这些使用频繁的样式剥离出来，按照需求使用，通常这些选择器具有固定样式表现，比如清除浮动等(不可滥用)。
- 状态(.z-):为状态类样式加入前缀，统一标识，方便识别，它只能组合使用或作为后代出现。
- javascript(.j-):j-被专用与JS获取节点，请勿使用j-定义样式。
- class名称中只能出现小写字符和破折号(不是下划线，也不是驼峰命名法)。破折号应当用于相关class的命名(类似于空间命名)，例如：.btn和.btn-xxx。
- 避免过度任意的简写。例如：.btn代表button，但是.s不能代表任何的意思。
- class名称应当尽可能短，并且意义明确。
- 使用有意义的名称，使用有组织或目的的明确的名称，不要使用表现形式的名称。
- 基于最近的父class或基本(base)class作为新class的前缀。例如：父class为.btn则子class为.btn-xxx。
- 使用js-*class来标识行为（与样式相对），并且不要将这些class包含到css文件中。

# 统一了解和命名

|语义 | 命名 | 简写
| ————- | ———— | —————- |
| 布局.g- | |
|文档| doc|doc
|头部 | head | hd
|主体 | body | bd
|尾部 | foot | ft
|主栏 | main | mn
|主栏子容器 | mainc | mnc
|侧栏 | side | sd
|侧栏子容器 | sidec | sdc
|盒容器 | wrap/box | wrap/box
|==========|===========|===============|
| 模块（.m-）、元件（.u-）：
| 语义 | 命名 | 简写
| 导航 | nav | nav
| 子导航 | subnav | snav
| 面包屑 | crumb | crm
| 菜单 | menu | menu
| 选项卡 | tab | tab
| 标题区 | head/title | hd/tt
| 内容区 | body/content | bd/ct
| 列表 | list | lst
| 表格 | table | tb
| 表单 | form | fm
| 热点 | hot | hot
| 排行 | top | top
| 登录 | login | log
| 标志 | logo | logo
| 广告 | advertise | ad
| 搜索 | search | sch
| 幻灯 | slide | sld
| 提示 | tips | tips
| 帮助 | help | help
| 新闻 | news | news
| 下载 | download | dld
| 注册 | regist | reg
| 投票 | vote | vote
| 版权 | vcopyright | cprt
| 结果 | result | rst
| 标题 | title | tt
| 按钮 | button | btn
| 输入 | input | ipt|
|==========|===========|===============|
| 功能（.f-）|
| 语义 | 命名 | 简写 |
| 清除浮动 | clearboth | cb
| 左浮动 | floatleft | fl
| 内联 | inlineblock | ib
| 文本居中 | textaligncenter | tac
| 垂直居中 | verticalalignmiddle | vam
| 溢出隐藏 | overflowhidden | oh
| 完全消失 | displaynone | dn
| 字体大小 | fontsize | fz
| 字体粗细 | fontweight | fs
|==========|===========|===============|
| 皮肤（.s-）|
| 语义 | 命名 | 简写
| 字体颜色 | fontcolor | fc
| 背景颜色 | backgroundcolor | bgc
| 边框颜色 | bordercolor | bdc
|==========|===========|===============|
| 状态(.z-)|
| 语义 | 命名 | 简写
| 选中 | selected | sel
| 当前 | current | crt
| 显示 | show | show
| 隐藏 | hide | hide
| 打开 | open | open
| 关闭 | close | vclose
| 出错 | error | err
| 不可用 | disabled | dis

# 注意事项：

一律小写，中划线。
2. 尽量不用缩写。
3. 不要随便使用id。
4. 去掉小数点前面的0：例如：0.9cm => .9cm
5. 使用简写：margin：0 50px;
HTML规范
【页面头部】
<!DOCTYPE html>首行顶格开始。
2. 必须声明文档类型的编码charset，且与文件本身编码保持一致，指定字符编码的meta必须是head的第一个子元素。
推荐使用UTF-8编码。
- 网页显示字符集

<meta charset="UTF-8">

<meta http-equiv="content-type" content="text/css;charset=gb2312">

<meta http-equiv="content-type" content="text/css;charset=gbk">

<meta http-equiv="content-type" content="text/css;charset=utf-8">
### - 可选标签公司的版权注释

```
```
 网页制作者信息<br />
```
<meta name="author" content="123456@qq.com">
```
 网站简介
```
<meta name="description" content="xx学院创立于xxx年，学院开设了xxx课程,老师拥有x年的教学经历">
```
 设定网页的到期时间，一旦网页过期，必须到服务器上重新调阅
```
<meta http-equiv="expires" content="Wed,26 Feb 2017 08:24:00 GMT">
```
 禁止浏览器从本地机缓存中调阅内容<br />
```
<meta http-equiv="pragma" content="no-cache">
```
 用来防止别人在框架中调用你的页面
```
<meta http-equiv="Window-target" content="_top">
```
 自动跳转<br />
```
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
```
 网页搜索机器人向导，用来告诉机器人哪些页面需要搜索，哪些页 面不需要搜索<br />
```
<meta name="robots" content="none">
```
 收藏夹图标<br />
```
<link rel="Shortcut Icon" href="favicon.icon"> ```

根据页面内容和需求填写适当的keywords和description

             `<meta name="description" content="不超过150个字符">`
     `<meta name="keywords" content="">`

页面title是不可缺少的一项，title 必须作为 head 的直接子元素，并紧随 charset 声明之后
```
     `<head>`
     `<meta charset="UTF-8">`
     `<title>页面标题</title>`
 `</head>`
```

【资源引入】

保证 favicon 可访问
<link rel="shortcut icon" href="path/to/favicon.ico">用于显示网页导航栏上的logo
2. 引入 CSS 和 JavaScript 时无须指明 type 属性
3. 引入 CSS 时必须指明 rel=”stylesheet”
<link rel="stylesheet" href="page.css">
4. 使用link将css文件引入，并置于head中；使用script将js文件引入，并置于body底部
5. 移动环境或只针对现代浏览器设计的 Web 应用，如果引用外部资源的 URL 协议部分与页面相同，建议省略协议前缀。这是因为使用 protocol-relative URL 引入 CSS，在 IE7/8 下，会发两次请求。是否使用 protocol-relative URL 应充分考虑页面针对的环境
<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>

【结构优化】

尽量遵循html标准和语义，但是不要以牺牲使用性为代价。任何时候都要尽量使用最少的标签并保持少的复杂程度。
2. 结构顺序和视觉顺序节本保持一致，按照从上至下，从左至右的顺序书写html结构。
3. 结构(html)，表现(css)，行为(Js)三者分离,避免内联。
4. 每一个块级元素都要另起一行，每行都使用Tab缩进对齐（head和body作为子元素可以不缩进）。
5. 对于内容较为简单的表格，建议将tr写成单行。
6. 可以在大的模块之间用空行隔开，使模块更清晰。

【语义化】

浏览器会根据标签的语义给一个默认的样式，判断网页标签语义化是否良好的一个简单方法：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性
1. 尽可能少的使用无语义标签，例如span和div。
2. 在语义不明显，既可以使用p也可以使用div的地方，尽量使用p。
3. 在既可以使用div又可以使用section的地方，尽量使用section。
4. 不要使用纯样式标签，例如：b，u等……，而改用css设置。

# 代码格式

【命名】

class必须单词全字母小写，单词之间以 - 分割。
2. class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
3. 同一页面，应该避免使用相同的name与id。因为IE7浏览器会混淆元素的id和name属性。
【标签】
标签名必须使用小写字母。
2. 对于无需自闭合的标签，不需要自闭合。
3. 对HTML5中规定允许省略的闭合标签，不允许省略闭合标签。
4. html标签的使用应遵循标签语义，且要符合标签嵌套规则。
【注释】
采用类似标签闭合的写法，与html统一格式。注释文案两头空格，与css注释统一格式。
- 开始注释：(文案两头空格)
- 结束注释：(文案前加”/“符号，类似标签的闭合)
- 注意：允许只有开始注释。
【属性】
属性和值全部小写。
2. 属性中必须用双引号包裹。
3. 布尔类型的属性，建议不添加属性值。
4. 自定义属性建议以xxx-为前缀，推荐使用data-。
5. 可以省略style标签和script标签的type属性。
【图片】
进制img的src属性取值为空，否则会导致部分浏览器重新加载一次当前页面。
2. 为图片添加alt属性，提高图片加载失败时的用户体验。
3. 避免为img添加不必要的title属性，多余的title影响看图效果，并增加了页面尺寸。
4. 为图片添加width和height属性，避免页面抖动。
5. 有下载需求的图片采用img标签实现，无需下载的图片采用css背景图实现。
- 产品logo，用户头像，用户产生图片等潜在需求的图片，以img形式实现，能方便用户下载。
- 无需下载需求的图片，例如：icon，背景，代码使用的图片等，尽量使用css背景图实现。
【表单】
有文本标题的空间使用label标签将其与其标题相关联。最好将控件置于label内，以减少不必要的id。
2. 使用button元素时，必须指明type属性值。因为button元素的默认type为submit，如果被置于form元素中，点击后将导致表单提交。

css.note

html,css规范

css规范

#样式属性顺序

#class命名规范

分类式命名法(在前端组件优化下尤为重要)

# 统一了解和命名

# 注意事项：

HTML规范

【页面头部】

- 网页显示字符集

【资源引入】

【结构优化】

【语义化】

# 代码格式

【命名】

【标签】

【注释】

【属性】

【图片】

【表单】