命名和封裝多字CSS類和ID的最佳做法是什麼？

我試圖找出什麼是命名和套管CSS類和ID，特別是多個單詞名稱的最佳做法。命名和封裝多字CSS類和ID的最佳做法是什麼？

所以舉個例子，假設我有一個<div>，我想命名爲「角色技能」。看起來有3個選擇：「characterskills」，「character_skills」或「角色技能」。

哪一個是命名css類和id的行業標準？

在css名稱中分割多個單詞的最佳做法是什麼？

也是最好的做法總是使用所有小寫字母的CSS名稱，因爲它們是不區分大小寫？

2009-10-29 Mark Rogers

我傾向於使用連字符風格。我主要使用這種風格，因爲CSS屬性遵循相同的框架。同樣，JavaScript函數和變量傾向於使用較低的駝峯大小寫。例如，要在JavaScript中更改CSS屬性，您需要輸入object.style.textDecoration，但在CSS中，該屬性將更改爲text-decoration。

來源

2009-10-29 20:39:33 jennyfofenny

我個人使用了連字符風格（即some-class），但您應該簡單地選擇您認爲最好的並保持一致。這完全是一個美學問題。

來源

2009-10-29 20:32:30

對不起，我不得不取消選擇你的答案，因爲我不相信這純粹是一個美學問題。當人們採用常見的風格時，代碼變得更具可讀性，因此更有價值。 – 2009-11-09 15:04:00

我看到下面的外殼風格很多：

characterSkills， CharacterSkills

但是，在這一天也沒關係你選擇哪一種風格的結束。只需在你自己的應用程序內保持一致

來源

2009-10-29 20:32:39 NotMe

我已經看到了幾個不同的答案，這取決於你問誰。通過所有你提到的可能性，可能更多。我經常看到的一個是使用下劃線（character_skills）和全部小寫字母。

這個答案總是被提及，雖然和可以說比你選擇的方法更重要的是，選擇一個並堅持到底。將事物保持一致可以讓您在以後避免混淆和其他問題。

來源

2009-10-29 20:35:37 Mercurybullet

我用lowerCamelCase上課，併爲UpperCamel的ID，像這樣：

 
#HeaderLogo { ... } 
.pullQuote { ... }

但它確實使絕對沒有什麼區別，只要你是一致的:)呵呵，並嘗試堅持單詞類名在可能的情況 - 你總是可以結合類，像這樣：

 
.boxout { border: 1px solid; padding: 10px; } 
.emphasised { font-weight: bold; } 
.subtle { font-size: small; } 

.boxout.emphasised { background: yellow; } 
.boxout.subtle { color: gray; }

...這是我願意的話，你可以有你的「基地」類持有的核心定義，保持你的CSS小，減少了設計頁面時必須記住的課程總數。

來源

2009-11-12 21:37:00

我使用lowerCamel作爲類名，UpperCamel作爲ID。這是非常重要的，我打這個舊的答案，因爲國際海事組織的複合風格應該是灰心，即使下劃線比連字符更好。

爲什麼？因爲每一種其他語言都不能有連字符的變量名。例如，您的IDE可能會或可能不會正確拾取自動完成。（我的IDE不能，它是VI：P）

CSS與JavaScript密切相關，帶連字符的類名也使得與JavaScript互操作變得困難。考慮下面的（人爲）的jQuery：

// For each of the following class, perform a function 
var funcs = 
{ 
    main: function(){ /* ... */}, 
    toolbar: function(){ /* ... */ }, 

    // Oops, need to use a quote because there's this hyphenated name 
    'customer-info': function(){ /* ... */ } 
}; 

// Woot, a O(n^2) function 
for(var className in funcs) 
{ 
    var func = funcs[className]; 
    // maybe if we named it $('#some-selector')? The hyphen suddenly feels 
    // like some kind of operator to me. Makes me nervous :/ 
    $('#SomeSelector div').each(function() 
    { 
     if($(this).hasClass(className)) func(); 
    }); 
}

有沒有明顯的優勢，使用不是主觀的美學等複姓風格。缺點是它從所有其他編程語言中脫穎而出（好吧，CSS可能不是一種編程語言，哦，好吧..），並且它在技術上是不正確。

表示空格的正確方法是下劃線。考慮這個短語「一封自己寫的信」，我該如何轉換空格？

a_self-addressed_letter（正確的，保留了原來的意思）
一個自尋址信（哎喲！如果我們將其轉換回我們得到「自我解決的字母」！）

也是最好的做法總是使用所有小寫的CSS名稱，因爲它們是不區分大小寫？

我想在這種情況下，最好總是使用PascalCasing，因爲它有助於可讀性。

來源

2010-07-06 17:27:06 kizzx2

有趣的答案，要考慮的事情。儘管我有一個小小的批評，但是語法正確的json總是應該在左側使用引號（單或雙）的字符串，儘管由於大多數json解析器能夠解釋無效的json，因此很少遵循這種語法。因此，您在Json上面發表評論：「// Oops，需要使用引號，因爲有這個帶連字符的名字」，具有可疑價值。 +1添加一個有趣的觀點。 – 2010-07-06 20:06:37

是的，我知道，技術上JSON鍵應該總是被引用，我只是不能提出一個更好的現實生活中的例子來表達我的觀點：P這個想法就是所有的標準變量名都沒有連字符。 – kizzx2 2010-07-07 02:10:16

因爲「每隔一種語言都不能有連字符的變量名」而忽略了Lisp，所以放棄了否定。 – pkh 2017-01-17 22:49:41

讀書的例子，使我自己的錯誤後，我降落在這個解決方案對自己說：

使用連字符顯示層級，例如#products-MainContent {}或#maincontent-Summary {}。對我而言，這意味着MainContent是產品div的孩子。
在ID的第一個元素之後大寫每個單詞。全部使用小寫字母，例如#summary-Statistics（ID）或.summary-statistics（等級）

這對我來說現在適用。我不想用連字符分隔單詞，因爲我認爲連字符應顯示依賴關係。另外我不想混用ID和類，因爲它們看起來很相似，所以我改變了它們寫入的情況。

來源

2014-05-07 13:45:47

命名和封裝多字CSS類和ID的最佳做法是什麼？

回答

相關問題