通用CSS類錯誤嗎？

Question

比方說，我有這樣的

.cleaner:after { 
    content: '.'; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    height: 0;     
} 

清潔，所以我可以添加類清潔劑的一切我想要清除浮動。這是比添加更好的方式

<div style="clear:both;"></div> 

而不是，因爲它並沒有真正地將設計與標記分開。

雖然這種方法可以減少一些代碼重複，但它也有點打破了分離設計的想法，因爲我必須直接更改html。

有沒有類似這樣的課程，並將它們添加到需要的地方？或者我應該添加:after { ...明確地表示我不想清除浮動內容（例如#header：after ...，#menu：後面的{....`），這會導致代碼重複，但也會有更多的分離設計我不必直接觸摸HTML。

很可能是通用類對於javascript來說很有用，它可以更容易地改變樣式，但代碼複製是否值得純HTML/CSS中分離設計的效果？

Answer 1

有沒有類似這樣的類並將它們添加到需要的地方？

是的。我用很長時間很多不同的設計，並沒有發現任何麻煩;-)

Answer 2

我在這種情況下試圖做的是找出是否有一些我缺少的基礎抽象。這些元素在結構上有什麼共同之處嗎？你能想到一個類名將它們全部綁在一起，並且沒有CSS嗎？

如果沒有，請不要對作弊感到不好。完美是善的敵人。

Answer 3

是的。

class屬性用於表示共享相同類的元素屬於一個組。然後，您可以使用CSS或Javascript對這些組進行操作。元素可能是許多組的一部分，因此可能有許多類。

在你的例子中，div屬於組件「之後我想清除浮動元素的元素」，因此該組中的每個元素都應該有「更清晰」的類來向CSS表明這一點。

對這篇文章有對"Modular CSS"讀的是談論一個很好的方式來組織你的CSS和類

Answer 4

的問題是，CSS是從避免重複的觀點來看，設計不當。如果我們能夠定義規則和值的組並將它們應用於某些選擇器，那將會非常棒。這樣，您可以避免重複，而無需在HTML中添加表示標記。不幸的是，CSS很難做到這一點。

您的方法相當合理，但存在一個主要缺點：如果相同的HTML旨在與多個樣式表一起使用，並且某些樣式表需要與其他樣式表在不同位置進行清除，那麼您可能會遇到此方法的問題。如果你的HTML代碼已經與文檔的表現聯繫起來，那麼這個缺點並不適用。

編輯：忘記提及，如果您的CSS以編程方式生成，您可以無效地重複自己。然後，它可以像CSS一樣冗長而複雜，而且在概念上簡單且易於維護。這裏的缺點是增加下載量。這可以通過壓縮來緩解。

Answer 5

在完全不依賴於內容的解決方案中，確實沒有好方法來清除佈局。這是因爲CSS是一種樣式語言，並且已經被重載來處理佈局（就像HTML表格在「當天」回來一樣）。真的沒有純粹的佈局語言可用（然而），因此我們必須與我們所擁有的做一下。

我喜歡你的方法，因爲它保持了額外的標記元素到最低限度，這是更便攜。不過我不確定IE6是否支持：在僞元素之後，請謹慎行事。