健壮可扩展？

• 面向组件

• 沙箱化

• 方便：开发者体验好

• 安全性错误：所有东西都可以默认局部化，并且全局和只是一个特例

具体规则：

总是类名优先

特例：在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
}

原文地址：一个健壮且可扩展的 CSS 架构所需的8个简单规则