健壮可扩展的CSS规则健壮可扩展的CSS规则

健壮可扩展？

面向组件
沙箱化
【健壮可扩展的CSS规则】方便：开发者体验好
安全性错误：所有东西都可以默认局部化，并且全局和只是一个特例

具体规则：总是类名优先特例：在body上设置一些可继承属性
组件代码放在一起

文章图片
易看的组件代码使用一致的类命名空间命名空间规范：使用 app-Component-class

app 将当前应用和其它可能运行在同一DOM上的应用隔离开来
Component 将组件和应用里其他的组件隔离开来
class 为局部样式效果保存一个局部名称

维护命名空间和文件名之间的严格映射所有影响一个特定组件的样式都应该放到一个文件里，并以组件命名

文章图片
搜索header组件避免组件外的样式泄露将整个样式文件包装成一个前缀

文章图片
SASS中实现

文章图片
编译后避免组件内的样式泄露

文章图片
父组件样式

文章图片
布局结果
父组件 header里的选择器 .myapp-Header a 同样匹配了 LoginForm组件里的元素。
这个问题有两个修复方法：

绝不在样式表中使用元素名称选择器 ---- 将所有Header里的元素都使用代替
在命名空间之外只使用 > 操作符来选择元素

遵守组件边界父组件只可以在子组件边界之外对子组件产生影响。这意味着关系到位置和大小的属性（如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组件的基础。有以下代码：

这样写的坏处： .btn不符合组件的命名规范。
解决方式：