网站建设关于前端架构设计解决方案之特性之争与继承之痛。
网站建设公司认为过去几年，我们仍然在处理我在前一章中描述的 100％ 动态标记或 100％ 静态标记。不论是哪一种，我们几乎总是从全局作用域开始开发，一层一层增加细节。深圳网站建设公司现在从使用通用样式开始，比如页首和段落的标签，然后给页面里的各个部分应用具体的样式：
<body>
<div class="main">
font-size：24px;
color：red;
}
#sidebar h2 {
font-size：20px;
background：red;
color：white;
}
#sidebar .calendar h2 {
background：none;
color：red;
}
</style>
这种方法的问题很多。选择器优先级无论你处理带 ID 的标签还是长选择器，重写一个选择器时，总是需要注意它的优先级。颜色重置要恢复到原来的 H2 颜色，我们必须再次指定样式，并且要覆盖当前的背景颜色。位置依赖现在我们的日历样式依赖于侧边栏的样式。如果将日历移到页首或者页尾，样式将会改变。多重继承现在这个 H2 的样式来源多达三个，这意味着只要改变主体或侧边栏的样式，都会影响到日历的呈现。深层嵌套日历控件里的日历条目可能还有其他的 H2，而它们也需要一个更具体的选择器，这样一来，H2 的样式来源就增加到了四个。
深圳 网站建设公司资深前端框架工程师还提醒一种现代的、模块化的方法我们在前面相关 HTML 时就涉及了一些现代模块化原则，大多数 CSS 框架用它们来解决刚才描述的方案中出现的问题。虽然 OOCSS、SMACSS 和 BEM 对使用什么样的标记有着不同的观点，但它们中的每一个都提供了如何写 CSS 的建议，无论你采取了哪一个方案，这些建议都很有价值。让我们来快速看一下这些关键原则，并且了解它们是如何帮助我们解决前面遇到的问题的。
OOCSS 带来分离容器和内容的思想，我们学会不再使用位置作为样式的限定词。你完全可以在网站上放一个侧边栏，并且给这个侧边栏使用任何你喜欢的样式，但是，侧边栏的样式不应该影响侧边栏的内容。#sidebar h2 意味着，放在侧边栏的每一个 H2 元素，要么接受这个样式，要么就重写来避免使用这个样式。而 .my-sidebar-widget-heading 意味着样式只限定于这一个标题，完全不会影响其他标题。SMACSS 给我们带来把布局和组件分离到不同文件夹的思想，进一步将侧边栏的角色和日历模块划分开。现在我们只是定义了侧边栏的角色是布局，甚至不允许元素样式在那部分 Sass 语法的代码里
float：left;
……
}
.sidebar {
float：right;
……
}
</style>
深圳网站建设公司提醒这就解决了刚才的由于依赖位置而造成 CSS 样式混乱的问题。选择器优先级把 ID 选择器改成 CSS 类名选择器是一个很好的开始，这样可以停止 CSS 优先级之间的冲突问题，让每一个选择器的权重扁平化成“1”，我们就不再需要利用优先级较量出“胜利者”来决定样式。颜色重置比降低权重更好的方法是对每一个元素使用唯一的选择器。这样你的模块样式就不再会与侧边栏样式或者页面通用样式冲突了。位置依赖去掉布局文件中的样式代码之后，我们就不用再担心因为把日历组件移出侧边栏而造成样式改变了。多重继承每个标题都有了自己唯一的 CSS 类名之后，我们就可以任意修改其中的某个样式而不会影响其他标题了。如果你想改变多个选择器对应的样式，可以使用预处理器变量、混入（mixin）或继承来帮你做。深层嵌套即使在日历的层级上，我们也仍然没有给 H2 标签应用任何样式。因此再给日历中的新 H2 添加样式时，就不需要重写通用样式、侧边栏样式或者日历的头部样式了。好了，
深圳网站建设公司本文关于“网站建设关于前端架构设计解决方案之特性之争与继承之痛”经验就分享到这里，如您有企业门户站、电商平台等网站定制建设项目需要开发，欢迎联系我们在线客服获取解决方案与报价。谢谢关注，博纳网络编辑整理。
