给自己的备忘，同时抛砖引玉
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: 一半元素高度，定高的块状元素，垂直居中
