使用 CSS 命名空间答案

【问题标题】：Using CSS Namespacing使用 CSS 命名空间
【发布时间】：2014-04-10 06:23:16
【问题描述】：

我是 CSS 和 HTML 的菜鸟，所以请耐心回答这个问题。

我正在将一个 Web 应用程序与我们现有的应用程序集成。他们定义了一些与我们的应用程序冲突的 css 规则。

我的问题是：有什么好的方法可以分离出每个应用程序页面使用的 CSS 规则吗？我试图查看 CSS 命名空间，似乎有很多返工，因为我必须在每个标签元素前面加上命名空间。

更新：我正在尝试将基于 Meteor 的应用程序集成到另一个基于 Meteor 的应用程序中，现在我不想要 2 css 两个混合。

【问题讨论】：

不确定你在问什么。您必须将您的 css 文件链接到您的 html 文档。您总是可以将您的 css 分成多个文件，并且只链接相应的 html 和 css 文件。您是在谈论某种类型的带有内部路由器的框架，例如 AngularJS？
我正在使用带有 Iron 路由器的流星框架。
投反对票！！，请注意解释

标签： html css meteor iron-router

【解决方案1】：

为每个页面/模块/应用程序的主体应用一个类。这样你当前的 CSS 仍然可以工作，你可以通过在你的新 CSS 前面加上 body 类来覆盖。

【讨论】：

【解决方案2】：

CSS 命名空间是唯一不错的选择。您可以使用 sublime 文本的多重编辑功能非常轻松地编辑所有规则。

【讨论】：

【解决方案3】：

根据您的应用程序的大小，一个非常肮脏且快速的解决方案是附加您需要的规则来分隔文件（并适当地应用）

例如

对于 main.html，你有 main.css
about.html，有 about.css

但是，这是一种非常糟糕的做法，因为您将所有请求分开，以获取基本相同的信息...

您可以做的是在您的开发环境中使用 CSS 预处理语言，例如 SASS、SCSS 或 LESS，您可以在其中将许多特定页面抽象为模块化文件，例如 main.sass、about、sass 等...它将被编译成一个 main.css 文件。

要考虑的另一件事是，CSS 是类、id 和伪选择器如何影响可应用规则的特异性。

即

!important > #id > .class > html_element

这是一篇很棒的关于 CSS 特性的介绍文章~ http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

【讨论】：

拼接文件不需要使用SASS、SCSS、LESS等

【解决方案4】：

我最终找到了适合我的解决方案。

对于我正在集成的另一个应用程序，我将它的整个主体放入一个容器中，并给它一个类。

在另一个应用的布局中，

<!-- Another application body layout-->
<body>
<div class="another-app-container">
  <!-- Here goes whole layout of page -->
   <p  class='someClass' > ....
     <div class='myClass'> </div>

   </p>
</div>

</body

在该应用程序的 CSS 中，我应用了以下 CSS 规则，

    .another-app-container * .someclass{
    // CSS rule goes here
    }
   .another-app-container * .myClass {
    // CSS rule goes here
    }

我在这里得到的 CSS 的优点是，'*' 应用了 CSS 规则，即使它有很多 CSS 元素嵌套。

因此，它将我自己的 CSS 与另一个应用程序隔离开来

【讨论】：

这里不需要使用 *。 “.another-app-container .someclass” 完成与“.another-app-container * .someclass”基本相同的事情，并且更简洁且更少混乱。也许你应该阅读css-tricks.com/almanac/selectors/d/descendant