使用CSS命名空間

-1

我很喜歡CSS和HTML，所以請耐心等待這個問題。使用CSS命名空間

我正在整合一個web應用程序與我們現有的應用程序。他們定義了一些與我們的應用程序衝突的css規則。

我的問題是：有沒有什麼好的辦法來分離出每個應用程序頁面使用的CSS規則？我試圖看看CSS命名空間，似乎很多重做，因爲我必須在每個標籤元素前加上命名空間。

更新：我正在嘗試將基於Meteor的應用程序整合到另一個基於Meteor的應用程序中，現在我不想要2 CSS混合。

來源

2014-03-07 ajduke

不確定你在問什麼。你必須鏈接你的CSS文件到你的HTML文件。你總是可以將你的css分成多個文件，並且只能鏈接相應的html和css文件。你在談論一些類似AngularJS這樣的內部路由器的框架嗎？ –

我正在用鐵路由器使用流星框架。 – ajduke

Downvoter !! ，請注意解釋 – ajduke

我結束了以下解決方案，摸索出適合我。

對於我正在整合的另一個應用程序，我將它的整個身體放入一個容器中，並給它一個類。

在另一個應用程序的佈局，

<!-- 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規則，CSS的

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

美容我來到這裏是 '*' 的應用CSS規則甚至包含很多CSS元素的嵌套。

因此，它將CSS自己從另一個應用程序中分離出來

來源

2014-04-09 04:25:40 ajduke

使用*在這裏沒有必要。「.another-app-container .someclass」與「.another-app-container * .someclass」基本上完成了相同的事情，並且更清晰並且更少混淆。也許你應該閱讀http://css-tricks.com/almanac/selectors/d/descendant/ – jbyrd

CSS命名空間是唯一不錯的選擇。您可以使用崇高文本的多重功能非常輕鬆地編輯所有規則。

來源

2014-03-07 07:56:15 jforjs

將一個類應用於每個頁面/模塊/應用程序的主體。通過這種方式，您當前的CSS仍然可以工作，並且您可以通過預先將新的CSS與主體類預佔來覆蓋。

來源

2014-03-07 07:56:38

根據應用程序的大小，非常骯髒，快速的解決方案是追加，你需要單獨的文件（並適當地應用）的規則

例如

爲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/

來源

2014-03-07 08:04:08

並置文件不需要使用SASS，SCSS，LESS等。 –

使用CSS命名空間

回答

相關問題