給自己的備忘商源，同時(shí)拋磚引玉
1 編碼規(guī)范
規(guī)范很重要琅攘，自己寫(xiě)著舒服仔夺，別人也看著舒服。
1.1 HTML
- id使用“全小寫(xiě)坚嗜、_間隔”的方式命名，如“delete_ap_btn”
- 不要使用過(guò)于簡(jiǎn)單的命名呢蛤，如header, btn等
- class“全小寫(xiě)惶傻、-間隔”。css的定義集中在class上
- js使用的class,增加“js-”前綴予以區(qū)分其障。例如 js-del-button
1.2 CSS
1.2.1 樣式使用BEM命名規(guī)范
- 模塊（B）银室、元素（E）、狀態(tài)（M）如有多個(gè)單詞使用-間隔励翼；
- 元素使用__間隔蜈敢，如 el-card__header；
- 修飾使用--間隔汽抚，如 el-button--info el-button--fail不同的類型來(lái)表示按鈕類型抓狭。
- 如果是同一個(gè)元素不同狀態(tài)，可以結(jié)果狀態(tài)類來(lái)定義樣式造烁，如is-disabled, is-selected
- 靈活命名否过，保持結(jié)構(gòu)簡(jiǎn)單午笛。
如表單、表單條目苗桂，正常應(yīng)該是form药磺、form__item，但form__item下還有l(wèi)abel煤伟，這時(shí)可以將item命名為 form-item癌佩，減少層次。
1.2.2 其他注意點(diǎn)
使用margin時(shí)統(tǒng)一一個(gè)方向便锨，如只用margin-bottom围辙，避免混亂。
1.3 JS
- 參考google js編碼規(guī)范
- 不在js中直接進(jìn)行css的更改
- $選擇器不要重復(fù)使用放案，如有多個(gè)選擇器姚建，可以將選擇器結(jié)果賦值給變量
-
開(kāi)頭
<span style="color: red">jQuery可以再總結(jié)</span>
2 關(guān)于HTML
原則就是語(yǔ)義化卿叽，減少不必要的結(jié)構(gòu)
語(yǔ)義化
- 可以鏈接的部分用 a桥胞；
- 圖片不要直接引入，如webpack不是很支持頁(yè)面直接使用<img>考婴；
- 表單用 form fieldset label這些規(guī)范元素贩虾；
- 文字中的強(qiáng)調(diào)使用 em；
- 使用html5標(biāo)簽如header, footer沥阱；減少無(wú)語(yǔ)義的div使用
標(biāo)題使用h標(biāo)注等級(jí)
- 網(wǎng)站標(biāo)題h1
- 頁(yè)面標(biāo)題h2
- 功能標(biāo)題h3
- 子功能標(biāo)題h4
一般主要是功能標(biāo)題缎罢，所以h3、h4會(huì)比較多些
3 css部分
3.1 樣式結(jié)構(gòu)
- reset樣式
重置樣式 - 基礎(chǔ)樣式
一般的想法考杉，重置樣式固定策精，每個(gè)項(xiàng)目如果基礎(chǔ)樣式修改，在后面補(bǔ)充崇棠⊙释啵可以理解Wie是對(duì)reset的覆蓋，個(gè)人感覺(jué)枕稀，可以直接跟reset合并询刹。 - 公共樣式
公共的類型，比如說(shuō)隱藏萎坷、不可用凹联。這些公共的可以抽離出來(lái)。有一種樣式編寫(xiě)思路就是將外間距margin哆档、內(nèi)間距padding等都抽離出來(lái)蔽挠，通過(guò)公共樣式組合達(dá)到效果，減少模塊樣式的使用 - 模塊樣式
就是具體的模塊樣式
3.2 reset樣式
reset樣式應(yīng)當(dāng)減少下不必要的部分瓜浸，如div本身就沒(méi)有默認(rèn)值澳淑，沒(méi)有必要有初始化
/*
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 布局
使用浮動(dòng)布局，根據(jù)24列原則進(jìn)行劃分杠巡。
3.4.2 按鈕
按鈕使用padding控制高度和寬度
3.4.3 總結(jié)
- 相鄰間隔使用 + 兄弟選擇器春寿，非常方便；
- transition 動(dòng)畫(huà)加入忽孽，對(duì)于高度更改、顏色更改都有很好的效果
- 居中問(wèn)題
vertical-align: middle 行內(nèi)元素谢床，垂直居中
text-align: center 行內(nèi)元素兄一，水平居中
left: 50%; transferX(50%) 不定寬的塊狀元素，水平居中
margin: 0 auto 定寬的塊狀元素识腿，水平居中
position: abosulte; top: 50%; margin-top: 一半元素高度出革，定高的塊狀元素，垂直居中
