健壮可扩展？
面向组件
沙箱化
方便：开发者体验好
安全性错误：所有东西都可以默认局部化，并且全局和只是一个特例
具体规则：
总是类名优先
特例：在body上设置一些可继承属性
组件代码放在一起
易看的组件代码
使用一致的类命名空间
命名空间规范： 使用 app-Component-class
- app 将当前应用和其它可能运行在同一DOM上的应用隔离开来
- Component 将组件和应用里其他的组件隔离开来
- class 为局部样式效果保存一个局部名称
维护命名空间和文件名之间的严格映射
所有影响一个特定组件的样式都应该放到一个文件里，并以组件命名
搜索header组件
避免组件外的样式泄露
将整个样式文件包装成一个前缀
SASS中实现
编译后
避免组件内的样式泄露
父组件样式
布局结果
父组件
header里的选择器 .myapp-Header a 同样匹配了LoginForm组件里的<a>元素。这个问题有两个修复方法：
- 绝不在样式表中使用元素名称选择器 ---- 将所有
Header里的<a>元素都使用<a class="myapp-Header-link">代替 - 在命名空间之外只使用
>操作符来选择元素
遵守组件边界
父组件只可以在子组件边界之外对子组件产生影响。这意味着关系到位置和大小的属性（如position、margin、display、width、float、z-index等）是可用的，而影响到内部边界的属性（如border本身、padding、color、font等）是不可用的。
几个特殊的边界情况：
-
box-shadow: 同时属于子组件和父组件 -
color,font及其它可继承属性:.myapp-Header > .myapp-LoginForm { color: red; }这种写法根据其它规则是可行的 -
display: 如果子组件使用Flexbox布局，那么它依赖于其根元素上设置display: flex属性；父组件可以选择通过display: none来隐藏子组件
松散地整合外部样式
使用Bootstrap作为Button组件的基础。有以下代码：
<button class="myapp-Button btn">
这样写的坏处： .btn不符合组件的命名规范。
解决方式：
<button class="myapp-Button">
.myapp-Button {
@extend .btn; // from Bootstrap
@extend .myapp-utils-button; // defined elsewhere in your project
}
