最佳實踐構建大基於HTML項目

Question

我開發的Rails爲基礎的網站，享受使用諧音的一些常見的「組件」

最近，我遇到一個問題，即用CSS干擾的狀態。

一個組件的樣式（在css中描述）覆蓋另一個組件的樣式。

例如，一個組件...

<ul class="items"> 

...和另一組分具有這一點。但是這個ul在這兩個組件中有不同的含義。

另一方面，我想從另一個「繼承」一個組件的某些樣式。

例如： 讓利，我們一個組成部分，被稱爲 「後」

<div class="post"> 
    <!-- post's stuff --> 
    <ul class="items"> 
     ... 
    </ul> 
</div 

與其他成分，被稱爲 「新崗位」：

<div class="new-post"> 
    <!-- post's stuff --> 
    <ul class="items"> 
     ... 
    </ul> 
    <!-- new-post's stuff --> 
    <div class="tools">...</div> 
</div 

崗位和新崗位有類似的東西（「帖子的東西」），我想讓CSS規則處理「post」和「new-post」

新帖子包含「subcomponents」，例如編輯工具，它還具有：

<ul class="items"> 

這是開始地干擾CSS規則 - 一些規則，針對ul.items（在崗位和新崗位）適用的新子後，所謂的「工具」

在一個手 - 我想繼承一些風格

在另一方面，我想變得更好incapsulation

什麼是最好的做法，以避免這樣那樣的問題？

Answer 1

使用繼承是你的優勢。

.items { /* common shared styles here */ } 
.post .items { /* styles specific to item lists inside a .post div */ } 
.new-post .items { /* styles specific to item lists inside a .new-post div */ } 

如果你想。員額列表和。新員額列表共享一個風格，理想的方式是增加第三類，這兩個份額和風格。

<style type="text/css"> 
    .items { /* common shared styles here */ } 
    .post { /* styles shared by all .post divs */ } 

    .old-post { /* styles specific to .old-post divs */ } 
    .old-post .items { /* styles specific .item lists inside .old-post divs */ } 

    .new-post { /* styles specific to .new-post divs */ } 
    .new-post .items { /* styles specific .item lists inside .new-post divs */ } 
</style> 

<div class="post old-post"> 
    <ul class="items">...</ul> 
</div> 

<div class="post new-post"> 
    <ul class="items">...</ul> 
</div>