专题课程
另一个流行的概念是SMACSS。SMACSS代表可伸缩的和是模块化的CSS结构体系。Jonathan Snook为CSS开发人员介绍了类似于这样的样式指南。为了单独的应用程序将其分为以下几类：
基本(base)：用于一个简单的选择器的基本样式，如clearfix
d布局（Layout）:定义网格
模块(Module)：一群元素相结合在一起形成的一个模块，比如说header和sidebar
状态（State）:元素的不同状态。如隐藏、按住，扩大等规则定义给对象
主题(Them)：更多的样式
我没有使用SMACSS的任何经验，便它是非常受欢迎，实际上也能促进你有更好的想法。这比一个框架的概念更强。所以，你不需要遵循任何严格的规则、类或者组件
知道了OOCSS和SMACSS后，请允许我找一个恰当的比喻，请快速登录这个页面。这里展示了一个伟大的原子设计概念。它的作者是Brad Frost，众所周知，他是一位有名的Web开发人员，致力于响应式设计和移动端开发。
这个想法是非常有趣的。以下是一些术语，我们可以说，物质的基本单位是原子。Brad Frost说我们的页面是用移动的原子构建，一个原子可以是：
或者
也就是说原子是包括了一些基本样式的DOM元素。如颜色、字体大小或者过渡动画。后来这些部分可以结合成分子，例如：
所以表单元素包含了几个原子。这样抽象带来的灵活性，因为我们可以使用相同的原子来构建另一个分子。这样一来，我们在不同的上下文中可以重用相同的形式：
Brad Frost并没有停止。生特体是构建分子的东西，遵循同样的方法，我们可以编写以下的结构，并将其称为有机体：
第二件事是模板的概念。他们不是直接相关的化学反应，但被放入了Web的上下文。一旦我们开始结合不同的生物构建我们的模板。后来这些模板形式就是我们最后得到的页面。
你可能已经使用类似的方法来构建应用程序。然而，命名的东西以一种合理的主式带来良好的结构。在开发中，你和你的队友会有很多事情需要去弄明白。分离的原子和分子是很重要的部分，因为它提高了工作效率和让你更好的维护您的Web应用程序。
让我匀先从框架最小的一部分开始——原子。维基百科是这样定义的，原子是物质的基本单位。在CSS中，我认为它是一个属性和一个属性值，例如：
仅仅为了写样式添加原子而直接添加类名，这并不是我想要的，如果有一个这样的类型：
预处理器将会失去他自己作用，因为我想要的结果是这样的：
在Sass中可以使用placeholders的功能，例如：
所以我不得不使用placeholder。这也意味着，我必须要定义很多placeholders，才能使用。在那一刻，我决定，这个框架将只包含原子。也许有一些分子和通用的函数，例如reset.css、网格的定义等等。我想写点东西，作为一个基础的CSS开发。也许我会看到项目中的一些模式，将其放在核心处，作为一个开始，并保持干净和简单。
事情变得更加的一致化，我创建了一个mixin作为一个原子。如这个例子：
使用这种方法，我创建了一个原子群，并且可以很容易的适合用于每一个项目。你可以点击查看。我并且拿其他的框架作为对比，让我更好的去实践，从中学到很多东西。还可以制作一个mixin分子，将原子相结合在一起：
分子（Molecules）
分子是一个DOM元素需要样式，但他没有子元素。或者他有子元素，便也不会直接连接到它。如<img src=”logo.jpg” />，可能是一个分子。如果你很难在你的页面识别这些分子，只需要想到什么是由原子构建就行。有些元素也有可能是构建其他分子的原子。如：
我们将面对一些很有趣的事。比如说我们的body标签。他是什么呢？它是一个分子或其他什么吗？当然，这需要一些样式，但一般在原子中包含其他分子。它应该是其他东西。我的结论是，CSS应该是主要部分，也就是说，如果body样式需要几个原子，那么他就是一个分子。这也就意味着，从理论上讲，我不应该附加任何其他的分子给它。这看起来有点不切实际，但在大多数情况下，会让你使用不同的选择器，这将是一个好的发展迹象。
一旦你认识到这个DOM元素是分子，那么你可以将其看到是一个细胞器。例如，典型的表单元素是一个很好的细胞器例子，他包含像label、input和textarea这样的分子。
这些也许是框轲中的一部分，它紧密的连接到当前应用程序中。原子和分子可能在不同项目之间移动，而细胞器是不可能会移动的。
很多时候你可能想把几个别的东西放在一起，这样细胞器变得更加抽象：
这将面对一个选择问题，你将如何构建你的CSS。我以前只在一个项目中使用OrganicCSS，到目前为止，我还可以说他是清晰的。我把不同的元素放在他们自己的目录中和按他们的名命名，这样我可以很容易的找到他们，并做相应的处理。例如，如果有一个细胞器称为header，我只需要将其修改为o-header。后来，让我读到HTML标记，我就可以看到该元素的CSS样式就在细胞器文件夹中。
收藏(0)
赞 
![Python开发视频教程零基础系统学习Python开发视频[1-40]课程](https://www.kokojia.com/Public/course_image/big/2020-04/5ea5492663b9a.jpeg)
![Python全新顶级课程 Python网络爬虫+Python游戏[348讲全集]视频教程](https://www.kokojia.com/Public/course_image/big/2022-01/61d01e6dc2fa4.jpeg)
粤公网安备44010602001432号