健壯可擴(kuò)展但荤？
面向組件
沙箱化
方便：開發(fā)者體驗(yàn)好
安全性錯(cuò)誤：所有東西都可以默認(rèn)局部化留荔，并且全局和只是一個(gè)特例
具體規(guī)則：
總是類名優(yōu)先
特例：在body上設(shè)置一些可繼承屬性
組件代碼放在一起
易看的組件代碼
使用一致的類命名空間
命名空間規(guī)范： 使用 app-Component-class
- app 將當(dāng)前應(yīng)用和其它可能運(yùn)行在同一DOM上的應(yīng)用隔離開來(lái)
- Component 將組件和應(yīng)用里其他的組件隔離開來(lái)
- class 為局部樣式效果保存一個(gè)局部名稱
維護(hù)命名空間和文件名之間的嚴(yán)格映射
所有影響一個(gè)特定組件的樣式都應(yīng)該放到一個(gè)文件里懦鼠，并以組件命名
搜索header組件
避免組件外的樣式泄露
將整個(gè)樣式文件包裝成一個(gè)前綴
SASS中實(shí)現(xiàn)
編譯后
避免組件內(nèi)的樣式泄露
父組件樣式
布局結(jié)果
父組件
header里的選擇器 .myapp-Header a 同樣匹配了LoginForm組件里的<a>元素搜吧。這個(gè)問(wèn)題有兩個(gè)修復(fù)方法：
- 絕不在樣式表中使用元素名稱選擇器 ---- 將所有
Header里的<a>元素都使用<a class="myapp-Header-link">代替 - 在命名空間之外只使用
>操作符來(lái)選擇元素
遵守組件邊界
父組件只可以在子組件邊界之外對(duì)子組件產(chǎn)生影響盲赊。這意味著關(guān)系到位置和大小的屬性（如position、margin惊窖、display刽宪、width、float爬坑、z-index等）是可用的，而影響到內(nèi)部邊界的屬性（如border本身涂臣、padding盾计、color、font等）是不可用的赁遗。
幾個(gè)特殊的邊界情況：
-
box-shadow: 同時(shí)屬于子組件和父組件 -
color,font及其它可繼承屬性:.myapp-Header > .myapp-LoginForm { color: red; }這種寫法根據(jù)其它規(guī)則是可行的 -
display: 如果子組件使用Flexbox布局署辉，那么它依賴于其根元素上設(shè)置display: flex屬性；父組件可以選擇通過(guò)display: none來(lái)隱藏子組件
松散地整合外部樣式
使用Bootstrap作為Button組件的基礎(chǔ)岩四。有以下代碼：
<button class="myapp-Button btn">
這樣寫的壞處： .btn不符合組件的命名規(guī)范哭尝。
解決方式：
<button class="myapp-Button">
.myapp-Button {
@extend .btn; // from Bootstrap
@extend .myapp-utils-button; // defined elsewhere in your project
}
