Question

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

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

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

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

Answer 1

将一个类应用于每页/模块/应用程序的主体。通过这种方式，您当前的CSS仍然有效，您可以通过在主体类前添加新CSS来覆盖。

Answer 2

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

Answer 3

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

e.g。

对于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/

Answer 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之美是，＆＃39; *＆＃39;它应用了CSS规则，即使它有很多嵌套元素CSS。

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

使用CSS命名空间

4 个答案: