使用硬编码的类命名方式，如：.btn 和 .table。难以想象的是这些类名被其他开发者或者项目所使用。
尽管如此，我们只能将Bootstrap作为Button 组件的基础使用。
我们要做的并不是像下面这样融合代码:
<button class="myapp-Button btn">而是考虑 继承 样式:
<button class="myapp-Button">.myapp-Button { @extend .btn; // from Bootstrap}这么做的好处在于不会让包括自己在内的所有人产生一个想法，即：你的样式依赖于类名为btn的样式 。Button的样式应该只来源于自身而不会受外部的影响。因此，无论你是使用Bootstrap还是其它框架，亦或者你自己编写代码，都应该遵循一个原则：针对于该类元素的设置不能影响到其它元素。
同样的原则也适用于自己编写的类，此时，你就可以选择使用更合理的类名:
.myapp-Button { @extend .myapp-utils-button; // defined elsewhere in your project}或者 在适当的时候引入所需类 (被大多数预处理器所支持):
.myapp-Button { @extend %myapp-utils-button; // defined elsewhere in your project}最后,所有的CSS预编辑器都支持 mixins 这一概念。
.myapp-Button { @include myapp-generateCoolButton($padding: 15px, $withExplosions: true);}应该注意的是，当使用更友好的框架(如：Bourbon 或者 Foundation)时，他们实际上会做的事只是:定义好了一堆mixin指令供你在需要的地方使用，而不会随意暴露出风格样式。Neat。
结束语
知道这些规则后，才能知道在什么时候可以去打破它
最后，正如前面所提到的一样，当你理解了这些列出的规则之后 ，你就可以判断它对于你来说的价值。例如, 你觉得使用辅助类是有价值的，你就可以这样编码:
<button class="myapp-Button myapp-utils-button">这就好比你在测试框架的时候所获得的附加价值值。它让你能更快速地找出可以作为按钮并能被点击的事物。 或者你能做出这样的决断，即：当打破元素间的隔离性所付出的代价很小时可以直接打破，又或者分裂组件的额外的工作是否太多。而我要提醒你的是这是个渐进性的工程且一致性是众多因素中最重要的。只要当你的团队统一风格而且你把事情做好的时候，你才做了正确的事。
最后
如果你喜欢这篇文章, 你可以 转发它! 。