给自己的备忘，同时抛砖引玉

1 编码规范

规范很重要，自己写着舒服，别人也看着舒服。

1.1 HTML

• id使用“全小写、_间隔”的方式命名，如“delete_ap_btn”
• 不要使用过于简单的命名，如header, btn等
• class“全小写、-间隔”。css的定义集中在class上
• js使用的class,增加“js-”前缀予以区分。例如 js-del-button

1.2 CSS

1.2.1 样式使用BEM命名规范

• 模块（B）、元素（E）、状态（M）如有多个单词使用-间隔；
• 元素使用__间隔，如 el-card__header；
• 修饰使用--间隔，如 el-button--info el-button--fail不同的类型来表示按钮类型。
• 如果是同一个元素不同状态，可以结果状态类来定义样式，如is-disabled, is-selected
• 灵活命名，保持结构简单。
  如表单、表单条目，正常应该是form、form__item，但form__item下还有label，这时可以将item命名为 form-item，减少层次。

1.2.2 其他注意点

使用margin时统一一个方向，如只用margin-bottom，避免混乱。

1.3 JS

• 参考google js编码规范
• 不在js中直接进行css的更改
• $选择器不要重复使用，如有多个选择器，可以将选择器结果赋值给变量
• 开头
  <span style="color: red">jQuery可以再总结</span>

2 关于HTML

原则就是语义化，减少不必要的结构

语义化

• 可以链接的部分用 a；
• 图片不要直接引入，如webpack不是很支持页面直接使用<img>；
• 表单用 form fieldset label这些规范元素；
• 文字中的强调使用 em；
• 使用html5标签如header, footer；减少无语义的div使用

标题使用h标注等级

• 网站标题h1
• 页面标题h2
• 功能标题h3
• 子功能标题h4
  一般主要是功能标题，所以h3、h4会比较多些

3 css部分

3.1 样式结构

• reset样式
  重置样式
• 基础样式
  一般的想法，重置样式固定，每个项目如果基础样式修改，在后面补充。可以理解Wie是对reset的覆盖，个人感觉，可以直接跟reset合并。
• 公共样式
  公共的类型，比如说隐藏、不可用。这些公共的可以抽离出来。有一种样式编写思路就是将外间距margin、内间距padding等都抽离出来，通过公共样式组合达到效果，减少模块样式的使用
• 模块样式
  就是具体的模块样式

3.2 reset样式

reset样式应当减少下不必要的部分，如div本身就没有默认值，没有必要有初始化

/* 
html5doctor.com Reset Stylesheet
v1.4.1 
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

:focus {
    outline: 1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

3.3初始样式

3.3.1 body

• font 字体（大小/行高，字体）
• background 背景色
• color 字体颜色

3.3.2 a

• color 颜色
• text-docoration 样式

3.4 具体样式分析

3.4.1 布局

使用浮动布局，根据24列原则进行划分。

3.4.2 按钮

按钮使用padding控制高度和宽度

3.4.3 总结

• 相邻间隔使用 + 兄弟选择器，非常方便；
• transition 动画加入，对于高度更改、颜色更改都有很好的效果
• 居中问题
  vertical-align: middle 行内元素，垂直居中
  text-align: center 行内元素，水平居中
  left: 50%; transferX(50%) 不定宽的块状元素，水平居中
  margin: 0 auto 定宽的块状元素，水平居中
  position: abosulte; top: 50%; margin-top: 一半元素高度，定高的块状元素，垂直居中