如何创建CSS的对象？获取合适的粒度！

在上一篇文章中 ，我说到：

倔强的把CSS和HTML塞到PHP内里可以防备代码太死板(DRY)并最终导致代码痴肥，由于的CSS和HTML必要比PHP更过细的工具布局。究竟上，PHP的模板不是生成吻合的，由于每个模板包括了很多差异的HTML，以及以差异的方法相团结的CSS工具。

然后，我并没有表明它，可能给出恰当的语境。歉仄！

正确的粒度是减小CSS的要害之一

在PHP层，下面的会话流(来自Facebook)或者是一个单个工具。全部的检测哪些HTML要表现可能潜匿的逻辑都包括在一个工具布局中。

一个Facebook会话流

凡是，开拓职员实利用这个CSS的匹配中端(介于前端和后端？)逻辑。我们祈望用于这个会话流的全部的CSS代码都包括在一个由ID包裹的沙盒内，好比#story。这将终结痴肥而死板的代码。为什么呢？由于CSS层的恰当的布局越发细化(粒度更小)。着实，试图在PHP层中给以CSS布局就像是试图行使数据库架构来设置Apache一样。这是行不通的。

会话流有许多更小(更过细）的工具构成

因此，我们可以看到，上面的会话流是由很多更小的工具构成的。当我们让工具更细化（颗粒更小），我们就会开始看到同样的模式重复呈现，然后同样的工具变得更可重用。我们开始看到在互联网上的大大都网站都是由沟通的根基一再的模式以差异的方法团结起来的。作为一个附带甜头，CSS会变得体积更小，更简朴。

这个会话流，一个PHP工具，是由几个HTML和CSS的工具构成的：

1个问题

5个媒体块

2个链接样式

1个评述列表

1个举措列表

1个段落

这种要领的甜头？

使CSS工具的粒度吻合意味着我们的CSS（嗯，推而广之，我们的HTML）变得更简朴、更轻。我们的小小的可重用的工具可以在整个网站上用来建设新的和差异的页面，而不消再增进css的巨细。

作为一个出发点，我提议您建设下列工具：问题、列表、笔墨处理赏罚和链接、容器、媒体、网格和模板。在做整个页面之前，先建设你的全部最小的工具，然后你的CSS将天然的保持很小。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!