日照网站建设_一种现代的、模块化的方法

网站建设设计中的一种现代的、模块化的方法

我们在前几天讨论 HTML 时就涉及了一些现代模块化原则，大多数 CSS 框架用它们来解决刚才描述的方案中出现的问题。虽然 OOCSS、SMACSS 和 BEM 对使用什么样的标记有着不同的观点，但它们中的每一个都提供了如何写 CSS 的建议，无论你采取了哪一个方案，这些建议都很有价值。让我们来快速看一下这些关键原则，并且了解它们是如何帮助我们解决前面遇到的问题的。

OOCSS 带来分离容器和内容的思想，我们学会不再使用位置作为样式的限定词。你完全可以在网站上放一个侧边栏，并且给这个侧边栏使用任何你喜欢的样式，但是，侧边栏的样式不应该影响侧边栏的内容。#sidebar h2 意味着，放在侧边栏的每一个 H2 元素，要么接受这个样式，要么就重写来避免使用这个样式。而 .my-sidebar-widget-heading 意味着样式只限定于这一个标题，完全不会影响其他标题。

SMACSS 给我们带来把布局和组件分离到不同文件夹的思想，进一步将侧边栏的角色和日历模块划分开。现在我们只是定义了侧边栏的角色是布局，甚至不允许元素样式在那部分 Sass 语法的代码里出现。如果你要在侧边栏里放一些代码，并且向它们添加样式，那么这些元素需要是某个组件的一部分，并且需要在组件的文件夹里定义。

虽然严格来说，BEM 并不算是一种 CSS 方法论，但它让我们知道，给标记中每个 CSS 类名一个没有重复的标识是有价值的。这是因为这样会使每个 BEM 风格的 CSS 类名都可以对应到某一组独属于该元素的 CSS 属性，而不会随着具体情境或选择器的使用而变化：

这就解决了刚才的由于依赖位置而造成 CSS 样式混乱的问题。

选择器优先级

　　把 ID 选择器改成 CSS 类名选择器是一个很好的开始，这样可以停止 CSS 优先级之间的冲突问题，让每一个选择器的权重扁平化成“1”，我们就不再需要利用优先级较量出“胜利者”来决定样式。

颜色重置

　　比降低权重更好的方法是对每一个元素使用一种的选择器。这样你的模块样式就不再会与侧边栏样式或者页面通用样式冲突了。

位置依赖

　　去掉布局文件中的样式代码之后，我们就不用再担心因为把日历组件移出侧边栏而造成样式改变了。

多重继承

　　每个标题都有了自己的 CSS 类名之后，我们就可以任意修改其中的某个样式而不会影响其他标题了。如果你想改变多个选择器对应的样式，可以使用预处理器变量、混入（mixin）或继承来帮你做。

深层嵌套

　　即使在日历的层级上，我们也仍然没有给 H2 标签应用任何样式。因此再给日历中的新 H2 添加样式时，就不需要重写通用样式、侧边栏样式或者日历的头部样式了。

以上是日照网站建设公司（昊诺网络公司）分享。