日照网站建设_CSS其他有助益的原则

日照网站建设_CSS其他有助益的原则

1　单一职责原则

在建立 Red Hat 网站的过程中，我发现了一些对规划 CSS 框架有极大帮助的东西。

单一责任原则规定你创建的所有东西必须有单一的、高度聚焦的理由。你应用到某个选择器里的样式应该是为了单一目的而创建的，并且能够很好地实现这个目标。

这并不意味着你应该为 padding-10、font-size-20 和 color-green 设置单独的 CSS 类名。 我们关注的是样式适用在哪些地方，而不是这些样式本身。让我们来看下面的例子：

虽然上面的例子看似相当有效，但是它显然不符合我们的单一责任原则。.primary-header 这个 CSS 类名被应用于页面上不止一个不相关的元素上。现在，primary-header 的“责任”是既负责日历的标题也负责博客的标题，这意味着对博客的标题做任何更改也会影响到日历的标题，除非你像下面这么写：

这种方法虽然在短期内有效，但是也使我们再次面临本章开头所提到的那几个问题。这个新的标题样式现在取决于元素位置，具有多重继承性，并且引发了“高优先级”争夺赛。

针对这个问题，一个更加可持续的方法是让每个 CSS 类名都有单一的、重要的任务：

虽然这种方法确实会导致一些代码重复（红色字体定义了两次），但是它的可持续性带来的好处大大超过代码重复的任何坏处。这里多出来的代码对网页大小的增加而言微不足道（gzip 喜欢重复的内容），而且由于博客标题不一定一直保持红色，如果整个项目强制执行单一责任原则，就能够确保在进一步改变时，我们可以毫不费力地完成，并且也不需要回顾之前的代码。

  以上是日照网站建设公司（昊诺网络公司）的分享，如果您喜欢我们的分享，请关注我们网站动态！