日常工作中要门，多人合作模式下如果能統(tǒng)一規(guī)范風(fēng)格，很有利于提高代碼可讀性與可維護(hù)性廓啊；記錄一下用過(guò)的??
命名
結(jié)合 中劃線 和 雙下劃線欢搜， -表示特定意義模塊，__表示下面的子模塊
/* 新聞版塊 */
.news-borad {
.board__abstract {/* 摘要 */
.indicator__content {/* 摘要 內(nèi)容 */
margin: 20px 0;
}
.indicator__title {/* 摘要 標(biāo)題*/
margin-bottom: 13px;
}
/* ... */
}
}
選擇器使用
選擇器嵌套應(yīng)盡量少于 3 級(jí)谴轮，提高代碼 可讀性與可維護(hù)性
/* bad? */
.page .header .login #username input {}
/* good?*/
.page input {}
- 盡量簡(jiǎn)潔炒瘟，不要使用嵌套過(guò)多過(guò)于復(fù)雜的選擇器。
- 通配符和屬性選擇器??效率最低第步，需要匹配的元素最多疮装，盡量避免使用。
/* 通配符 */
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}
/* 屬性選擇器：包含 "example" 的鏈接 */
a[href*="example"] {
background-color: green;
}
- 避免使用 CSS Expression（為了確保有效性粘都，CSS 表達(dá)式會(huì)進(jìn)行頻繁的求值廓推，耗能大。在很多團(tuán)隊(duì)也中它也是被禁用的）
- 日常小規(guī)范的積累驯杜，才能有效控制代碼質(zhì)量??
考慮性能的屬性選擇
這些是計(jì)算量較大的屬性
box-shadows
border-radius
transparency
transform（恰當(dāng)使用受啥，也可提高效率??）
CSS filters
需要避免頁(yè)面元素的重繪重排
- 使用
transform替代top，left等屬性的轉(zhuǎn)換 - 使用
visibility替換display: none鸽心，因?yàn)榍罢咧粫?huì)引起重繪滚局，后者會(huì)引發(fā)回流（改變了布局） - 不要把節(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量。（獲取屬性值的時(shí)候顽频，會(huì)引起重新計(jì)算）
- 不要使用
table 布局藤肢，可能很小的一個(gè)小改動(dòng)會(huì)造成整個(gè)的重新布局 - 動(dòng)畫(huà)實(shí)現(xiàn)的時(shí)機(jī)選擇，可以選擇使用 requestAnimationFrame
變量使用糯景，函數(shù)使用(scss)
$嘁圈、@mixin 、@include蟀淮；其中變量的使用最住，既方便統(tǒng)一批量修改，也有利于后期擴(kuò)展主題切換的需求怠惶，具體可參考Vue項(xiàng)目中Scss實(shí)現(xiàn)主題切換
??像這些定義mixins的文件涨缚，文件名頭可以加上下劃線，這樣后面就不會(huì)被編譯成單獨(dú)的css文件了
/* 引用全局變量 */
.main__container {
box-sizing: border-box;
border: 1px solid $--color-card-grey;
background: $--color-white;
}
/* 居中 */
@mixin center {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box {
@include center;
}
公共樣式策治，常用的搭配脓魏，提出來(lái)用
/*輸入提示文字placeholder*/
.ph-t {
font-size: 13px;
color: #B3B7C8;
cursor: default;
}
/* 清除浮動(dòng) */
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
目前的項(xiàng)目里兰吟，甚至連常用的margin，font-size等高頻屬性茂翔，也提取出來(lái)了??混蔼，個(gè)人感覺(jué)用起來(lái)還是比較方便
.ml-20 {
margin-left: 20px;
}
.fs-16 {
font-size: 16px;
}
最近看到一個(gè)css框架，感覺(jué)還不錯(cuò)珊燎，哇哦惭嚣！??
Tailwind CSS 是一個(gè)功能類(lèi)優(yōu)先的 CSS 框架，它集成了諸如
flex, pt-4, text-center和rotate-90這樣的的類(lèi)俐末，它們能直接在腳本標(biāo)記語(yǔ)言中組合起來(lái)料按，構(gòu)建出任何設(shè)計(jì)
