独立的容器和内容
这里的想法是，每个元素应该有相同的样式，不管他放在何处。所以，你应该尽量避免使用像下面演示的选择器：
CSS Code复制内容到剪贴板
.header .social-widget {
width: 250px;
}
如果你把.social-widget移动.header容器的外面，那么.social-widget的宽度就变了。尤其是用在页面上的组件。这也是我鼓励CSS模块化以及我强烈建议采用更多的时间去尝试。就我个人而言，以下的原则会将CSS写得更好。
框架
如果你在GitHub上打开OOCSS库你可以看到一个框架。是的，这个框架使用了面向对象的概念，他的CSS有很多很优秀的现成组件。很长一段时间我并不喜欢框架。如果你有在工作使用框架，你会发现他分为两个部分。事实上，你使用框架处理一些事情，你必须遵守他的规则。不过我更喜欢使用一些微小的框架。当然我不是说我得重新去造轮子，但我总是试图去寻找一种平衡。通常现成的解决方案导致系统的混乱和复杂。我建议是为一定的目的建立一个特定的东西。如果你试图去覆盖一些东西，你总是想到框架中的东西。
但事，我强烈建议你去查寻一个OOCSS框架。这是一个独特的知识块，也许它将适合用在你需要的地方。最早是由Nicole Sullivan提出这样的一个概念。如果你对OOCSS有什么意向或者想法，可到这里参加讨论。
SMACSS
另一个流行的概念是SMACSS。SMACSS代表可伸缩的和是模块化的CSS结构体系。Jonathan Snook为CSS开发人员介绍了类似于这样的样式指南。为了单独的应用程序将其分为以下几类：
基本(base)：用于一个简单的选择器的基本样式，如clearfix
d布局（Layout）:定义网格
模块(Module)：一群元素相结合在一起形成的一个模块，比如说header和sidebar
状态（State）:元素的不同状态。如隐藏、按住，扩大等规则定义给对象
主题(Them)：更多的样式
我没有使用SMACSS的任何经验，便它是非常受欢迎，实际上也能促进你有更好的想法。这比一个框架的概念更强。所以，你不需要遵循任何严格的规则、类或者组件。
Atomic Design
知道了OOCSS和SMACSS后，请允许我找一个恰当的比喻，请快速登录这个页面。这里展示了一个伟大的原子设计概念。它的作者是Brad Frost，众所周知，他是一位有名的Web开发人员，致力于响应式设计和移动端开发。
这个想法是非常有趣的。以下是一些术语，我们可以说，物质的基本单位是原子。Brad Frost说我们的页面是用移动的原子构建，一个原子可以是：
