你有沒有爲你的css多次使用它設置一個類？

我總是被告知要在你的CSS中取多個屬性，你多使用一次，並將它們全部添加到一個規則中。如下所示。（請原諒可憐的例子）你有沒有爲你的css多次使用它設置一個類？

我總是看到了這一點：

.button, .list, .items { color: #444; }

隨着多個規則，不能說留下了很多混亂的？

只有在CSS教程和示例香港專業教育學院看到了這一點：

.someColor { color: #444; }

並在CSS，只需添加 '.sameColor' 的另一個類。（div class =「button someColor」）

我從來沒有見過這樣的感覺，它會在你的CSS中留下更少的混亂。這會好嗎？或者你認爲它可能會讓你的HTML更混亂？

來源

2010-08-24 omnix

在第一個示例中，除非使用逗號，否則您不是在避免重複，而是在按鈕內的列表中選擇項目。 – recursive 2010-08-24 22:25:32

哎呀，我搞砸了，你是對的:) – omnix 2010-08-24 23:19:31

嘗試獨立於視覺效果命名類。無需更改HTML就可以使用CSS和設計和佈局。諸如.someColor或.left-sidebar之類的名稱是一種不好的做法。顏色和位置可以改變。也可以將規則應用於語義HTML元素，而不是在所有不同的div和跨度上添加類。應該很明顯，儘管許多人認爲這是錯的。

CSS是一套有限的規則，使它成爲一個完美的創造力刺激。

來源

2010-08-24 22:34:02

+1絕對正確。當客戶確定帶有一類.blueBackground的藍色邊欄實際上需要綠色時會發生什麼？ – 2010-08-24 22:56:22

+1「left-sidebar」是我經常忽略的一個很好的考慮因素：鑑於CSS可以控制定位的強大程度，在類名中明確表示這是一件壞事。好，弗蘭克。 – 2010-08-24 22:58:48

這一切都基於個人喜好。我已經嘗試了這兩種方法，並且更喜歡你列出的第二種方法，除了更多的通用類名稱，如middleParagraph或headerGraphic，所以它適用於一個區域而不是特定的顏色，因爲顏色可能會改變。

來源

2010-08-24 22:20:22 alex

+1他說的 – 2010-08-24 22:24:59

你的建議有點像線內風格，風格= 「COLOR：＃444」。所以如果你想改變你的元素的顏色，你必須改變html，這意味着你已經定義了風格作爲你的內容的一部分。這正是CSS應該避免的。

想象一下，如果您在多個html文件中多次包含'someColor'，並且您決定其中一些元素不應該具有'someColor'，畢竟您有很多文件需要處理。

我可能會避免列表選項太多，如果我做一個組件，說一個按鈕，我想在我的CSS文件中找到.mybutton類，並查看該組件的所有規則，而不必去通過各種無益的全球課程。此外，如果有人出現並改變了我們全球班的顏色，他可能會打破我的按鈕，就像按鈕控制了它自己的樣式一樣，它不會以這種方式被破壞。

來源

2010-08-24 22:40:53 davidbuttar

良好的類名和ID是您應該優化的第一位。然後移動到多個類名稱。

多個類別名稱可以幫助了不少，雖然考慮：

<div class="leftColumn">Left</div> 
<div class="rightColumn">Right</div> 
<div class="middleColumn hasLeft hasRight">I have padding-left of 210px and padding-right of 210px</div> 
<!-- alternatively, you could have --> 
    <div class="rightColumn">Right</div> 
    <div class="middleColumn hasRignt">I have padding right of 210px</div> 
     <!-- or --> 
    <div class="leftColumn">Left</div> 
    <div class="middleColumn hasLeft">I have padding left of 210px</div> 
     <!-- or --> 
    <div class="middleColumn">I have no padding</div>

和你的CSS

.leftColumn { width:200px; float:left; } 
.rightColumn { width:200px; float:right; } 
.middleColumn.hasLeft { padding-left:210px; } 
.middleColumn.hasRight { padding-right:210px; }

結果是浮動左/右列和中心區域具有填充補償他們。這意味着你可以設置你的middleColumn的樣式（例如.middleColumn .otherCoolSelector）。

來源

2010-08-24 22:54:40

這是一種不命名類的方法。您可以通過更改浮動屬性將右列轉換爲左列，反之亦然。位置和顏色等應由CSS決定，不應該是類名的一部分。 – randomThought 2010-08-24 23:23:37

@TP - 哇，這是沒有意義的。你是對的，你可以通過改變浮點數來改變左邊的權利。我也可以將.container改爲一個內聯元素。或身體顯示：無。這是一個例子，而不是模板。它讓觀衆瞭解多個類名的應用。 – 2010-08-25 02:49:10

將多個類應用於HTML元素是完全可以接受的。訣竅是明智的;我通常會發現，當我這樣做時，額外的類是對正在應用的基本樣式的添加或例外。例如，這裏有一些課程我偶爾添加到已擁有一類的元素：

error - 如果用戶輸入無效數據
first樣式當前元素 - 樣式的第一個元素在列表或表格行中，例如抑制左側填充
last - 樣式表中最後一個元素或表格行中的最後一個元素打壓利潤率右
even - 以斑馬條紋適用於替代元素
hidden - 隱藏的元素，如果它不是目前相關

這些額外的課程通常與服務器動態生成像ASP.NET或PHP這樣的語言。它們也可以通過JavaScript在客戶端添加或刪除，特別是與像jQuery一樣的庫。這對顯示或隱藏響應事件的元素特別有用。

來源

2010-08-24 23:29:47 Val

這裏有很多很好的答案。訣竅是找出哪一個最適合你的情況。

需要考慮的一件事是您的標記大小。在高流量的情況下，您的標記大小對頁面加載速度至關重要......每個字節都很重要。如果這是你的情況，那麼你可能想創建更多的CSS類，並減少你的標記。這樣，客戶端就會緩存更多，而您的網站的服務量也會減少。

來源

2010-08-24 23:46:02

你有沒有爲你的css多次使用它設置一個類？

回答

相關問題