帶有ID和類的CSS組織

您認爲組織網站CSS的最佳方式是什麼？帶有ID和類的CSS組織

我希望有類跟隨的ID。但是，它們不是唯一的。

例子：

h4 { 
    padding: 5px 5px 5px 10px; 
    font-size: 110%; 
    font-weight: bold; 
    color: #000000; 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0px 0px 5px 0px; 
    background:transparent url(/images/example2.jpg) no-repeat scroll left top; 
    text-transform: uppercase; 
} 
#rightcol { 
    padding: 0px; 
    width: 306px; 
    overflow: hidden; 
    float: left; 
    margin: 0; 
    border: 0; 
} 
#rightcol .container { 
    margin: 5px 6px 0 0; 
    padding: 5px 5px 0 5px; 
    background: #FFFFFF; 
} 
#box_info { 
    border: 1px solid #AAAAAA; 
    background: #4F4F4F; 
    line-height: normal; 
    background: #4F4F4F url("../images/example.gif") repeat-x top left; 
} 
#box_info.container { 
    margin: 10px 5px 10px 10px; 
    background: transparent; 
    padding: 0; 
}

如果有一個ID內部的ID信息框右側導航欄的信息框的容器將有權導航的，而不是！

<div id="rightnav"> 
    <div class="advert"> 
     This needs to be here as sometimes I need it without borders margins etc. 
    </div> 
    <div class="container"> 
     <div id="otherbox"> 
      <div class="container"> 
      </div> 
     </div> 
     <div id="info_box"> 
      <h4>Related Info</h4> 
      <div class="container"> 
       <span>Info in here</span> 
      </div> 
     </div> 
     <div id="yetanotherbox"> 
      <div class="container"> 
      </div> 
     </div> 
    </div> 
</div>

所以我的問題是：有沒有辦法讓他們獨佔（或私人，如果這是一個更好的詞）或組織CSS的更好的方法。

提前歡呼。

編輯：只是讓你知道，我喜歡把容器放在寬度的簡單原因。我想100％寬度，但我也想縮進我的容器。我發現添加填充到框中，然後爲容器添加邊距，我得到我想要的。如果你能告訴我如何用一個div來做到這一點，那麼儘管我只想更好地組織CSS，而不是html（因爲我相信我正在盡其所能地做到最好，但要在證明我錯了:)）。謝謝:)

來源

2009-08-28 Dorjan

這可能不是尋求幫助的最佳地點，而說「尊重」我的做事方式。你的HTML是一團糟，你的CSS只是一個解決方法，你需要一半的DIV。 – 2009-08-28 14:41:21

@Mike：我不知道 - 這顯然是一個人爲的例子，而不是他真正的代碼。只要拿它的面值，並與它一起去。 – 2009-08-28 14:42:31

好吧邁克我會給你我的佈局和結果，你可以告訴我如何更好地使用一半的div。 – Dorjan 2009-08-28 14:42:42

在您的情況下，當您想要應用#infobox .container樣式時，必須使用「！important」規則覆蓋#rightnav .container。如果您不想在名稱之間發生任何衝突，只需更改，例如，#rightnav .mainContainer中的#rightnav .container。我希望我寫的東西不那麼明顯。

來源

2009-08-28 14:47:41 riotera

這正是我所尋找的例子。雖然我不想走大量名字的路線。由於我做事情的方式，我不得不稱之爲#rightnav .rightnav_container等等，這是我想避免的。雖然我可以看到這可能是「最好」的aproch，除非上面的Mike能告訴我如何解決我的HTML「混亂」。 – Dorjan 2009-08-28 14:50:00

我不認爲你的代碼是一團糟。同樣，我會更改主容器的名稱以避免衝突，並且如果主容器有一些與其他容器共享的樣式，則可以設置一些常用樣式。 – riotera 2009-08-28 15:08:58

這實際上是個好主意，因爲我不會在每個區域都有兩個主要容器。所以.outercontainer然後只是.container會解決這個問題，你是對的。然而，我會留下問題打開一段時間，看看我是否得到任何其他口水，但你得到一個+1：D（和最有可能的正確答案勾號） – Dorjan 2009-08-28 15:17:02

級聯樣式表的屬性之一是他們級聯。應用於父元素的樣式也適用於他們的孩子。爲了改變這種情況，你必須通過顯式地重新設置它們來覆蓋從父類繼承的樣式。

來源

2009-08-28 14:41:41

嗯，我明白，但我可以不定義級聯的級別？就像你可以爲標籤，如p.example或p＃示例但不是＃example.example？ – Dorjan 2009-08-28 14:44:00

要定位子容器，你可以做#rightnav .container .container我想。

來源

2009-08-28 14:43:52 zakster82

不幸的是，這與#rightnav裏面的所有其他.containers無論多麼遙遠。這不是一個級別。 #rightnav .container將應用於#rightnav中的所有.container，無論.container嵌套在哪裏。 – Dorjan 2009-08-28 14:48:07

我想嘗試按類和id組織您的級聯規則，可能會錯過指導。你真的應該只考慮事物的實際聯繫，而不是試圖讓它們變得私密。

例如以下：

#container 
    { 
     width: 600px; 
     margin: auto; 
    } 
    #left 
    { 
     width: 250px; 
     float: left; 
    } 
    #left p 
    { 
     color: Blue; 
    } 
    #left .information p 
    { 
     font: normal .83em sans-serif; 
     color: #000000; 
    } 
    #right 
    { 
     width: 250px; 
     float: right; 
    } 
    #right ul 
    { 
     font: normal .83em sans-serif; 
     list-style: none; 
    }

將顯示此：

alt text http://img188.imageshack.us/img188/1576/croppercapture5e.jpg

正如你所看到的，有沒有字型的頁面本身。但是，當你在風格級聯的層次上深入探索時，你會發現paragaphs已經定義了風格，而.information類在段落中定義了藍色。通過深入瞭解HTML，需要考慮需要什麼樣式，您會發現實際上最終只有更少的HTML和更好的組織樣式表。

祝你好運，希望這有助於。

來源

2009-08-28 16:05:36 Chris

我希望我可以給出兩個正確的答案，因爲我問了兩個問題。 – Dorjan 2009-09-01 10:03:53