我應該如何命名我的CSS類？

例如，一個CSS類的投票計數，我應該如何命名它？

.vote-count-post  (1) // SO uses this 
.VoteCountPost  (2) 
.voteCountPost  (3) 
.vote.count-post  (4) 
.vote .count-post (5) 
.vote .count.post (6)

各有什麼優點和缺點？
哪個最常用，爲什麼？
這些都有影響嗎？
我可以在我的CSS中有大寫嗎？

來源

2011-01-22 BrunoLM

這只是命名，所以這取決於你喜歡什麼。你的任何一個例子都可以正常工作。只需選擇一個並堅持下去。

三個第一選擇器地址單個元素，第四個地址單個元素有兩個類，第五個地址元素在另一個元素內，第六個地址相同，但內部地址有兩個類。

我大概會把class="Vote"放在surronding元素上，並且在內部的count元素上輸出class="count"來解決它。我用帕斯卡情況下週圍的元素和小寫，它們內部的子元素，所以我會用：

.Vote .count

來源

2011-01-22 15:44:32 Guffa

如果`count`內有另一個子元素，你會怎麼做？這樣它就可以作爲一個孩子和一個周圍的元素。 – poke 2011-01-22 15:46:33

@poke：這取決於它們如何使用。所有的孩子班級都是小寫字母，但有時我會把周圍的班級放在另一班。我所有的選擇器都以一個pascal案例名稱開頭。 – Guffa 2011-01-22 15:52:11

4，5和6是特殊

.vote.count-post匹配元件與class="vote count-post"，或class="count-post vote"甚至class="vote something-else count-post"。與class="count-post"能與class="vote"
和.vote .count.post一個元素的子元素
.vote .count-post匹配元素是那些的混合物既

之間1，2和3，所有重要的是風格的偏好。就像他們在編程語言中一樣，有些人更喜歡一個人。所以只要選擇你個人喜歡的東西，或者更適合你的東西。

來源

2011-01-22 15:43:09 poke

我投（1）總是使用小寫爲你的CSS。這樣你就不必記住你在哪裏利用資源。因此，消除了（2）和（3）。

（5）實際上是兩個不同的元素，因此不適用於單個元素。

（4）和（6）是單個元件無效。 （4）假定您將兩個類應用於相同的元素，例如class='vote count-post'。 （6）是（4）和（5）的組合。

來源

2011-01-22 15:44:39 Keltex

我看到很多第一種方法（jQuery UI CSS框架使用它，我覺得它是一個很好的CSS示例）。

我個人不喜歡在（2）和（3）的類名中使用camelcasing，因爲它很容易出錯（只寫VotecountPost而不起作用）。（4），（5），（6）不是真正的約定事物，而是其他人已經指出的不同選擇器。

來源

2011-01-22 15:45:46 Daff

我認爲沒有「正確」的答案。我傾向於做更可讀的事情，所以我選擇（3）。在我看來，HTML/CSS中已經有足夠的單詞 - 單詞樣式文本。並且，當例如造型時WordPress的我認爲這就像一個充滿破折號的混音器，很難導航。

但是，這是我的看法，我認爲你應該只是感覺你喜歡什麼。你發現容易閱讀的東西，當你每天看8小時的時候，你應該選擇你喜歡的東西。

來源

2011-01-22 15:53:00 plebksig

我建議使用此.VoteCountPost更少的空間和可讀性..

來源

2011-01-22 20:45:38 Abudayah

我Keltex同意上面總是使用小寫更容易，更易於維護......尤其是爲別人誰可能需要檢查或修改您的工作。

然而，我還建議添加一個前綴你的CSS類名稱。在大型項目中，這有助於快速確定其來源及其適用範圍。它還有助於防止異類環境中的名稱衝突（以及不可預知的行爲）。

來源

2013-10-02 19:19:00 Roberto

在我使用jQuery的項目中，我確定我以兩種不同的方式使用類名。第一種是定義幾乎完全在.css文件中的樣式。第二個是針對jQuery選擇器，它們往往被隔離到一個單一的功能，並與腳本更相關。由於這個分割，我選擇按照＃1的樣式和＃2的jQuery元素選擇器。如果有人選擇查看源代碼，他們現在可以確定每種類型的功能。

來源

2014-01-04 19:20:40 user3071858

我應該如何命名我的CSS類？

回答

相關問題