給自己的備忘，同時拋磚引玉
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: 一半元素高度，定高的塊狀元素，垂直居中
