Was ist die beste Vorgehensweise zum Benennen und Umschließen von CSS-Klassen und IDs mit mehreren Wörtern?

Question

Ich versuche herauszufinden, was ist die beste Praxis für die Benennung und Gehäuse CSS-Klassen und IDs, vor allem mehrere Wortnamen.

Also zum Beispiel sagen, ich habe eine <div>, die ich "Charakter Fähigkeiten" nennen möchte. Es scheint, als gäbe es drei Möglichkeiten: "Charakterskills", "Charakterskills" oder "Charakter-Fähigkeiten".

Welcher von diesen ist der Industriestandard für die Benennung von CSS-Klassen und IDs?

Was ist die beste Vorgehensweise zum Teilen mehrerer Wörter in CSS-Namen?

Ist es auch eine Best Practice, immer alle Kleinbuchstaben für CSS-Namen zu verwenden, weil sie die Groß-/Kleinschreibung nicht beachten?

Answer 1

Ich neige dazu, den Bindestrich Stil auch zu verwenden. Ich benutze hauptsächlich diesen Stil, da CSS-Eigenschaften demselben Gehäuse folgen. In ähnlicher Weise neigen JavaScript-Funktionen und -Variablen dazu, einen niedrigeren Kamelfall zu verwenden. Um beispielsweise eine CSS-Eigenschaft in JavaScript zu ändern, geben Sie object.style.textDecoration ein, in CSS würde diese Eigenschaft jedoch mit text-decoration geändert werden.

Answer 2

Ich persönlich verwende die Bindestrich Stil (d. H. some-class), aber Sie sollten einfach wählen, was Sie am besten fühlen und konsistent sein. Es ist nur eine Frage der Ästhetik.

Answer 3

Ich sehe die folgenden Gehäuse Stile viel:

characterSkills, CharacterSkills

Aber am Ende des Tages ist es egal, welche Art Sie wählen. Sei einfach konsistent in deiner eigenen App.

Answer 4

Ich habe mehrere verschiedene Antworten auf diese Frage gesehen, je nachdem, wen Sie fragen. Durch alle Möglichkeiten, die Sie erwähnt haben, und wahrscheinlich mehr. Der am häufigsten verwendete Verweis ist jedoch die Verwendung von Unterstrichen (character_skills) und Kleinbuchstaben.

Die einzige Antwort, die immer erwähnt und wohl wichtiger als die Methode, die Sie wählen, ist es, eine auszuwählen und dabei zu bleiben. Wenn Sie die Dinge einheitlich halten, können Sie später Verwirrung und andere Probleme vermeiden.

Answer 5

Ich benutze lowerCamelCase für Klassen und UpperCamel für IDs, etwa so:

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

Aber es macht wirklich absolut keinen Unterschied, solange Sie konsistent sind :) Oh, und versuchen, ein-Stick Wortklassennamen wo möglich - Sie immer Klassen kombinieren, etwa so:

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

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

..., die ich lieber, wie Sie Ihre „Basis“ Klassen halten Kerndefinitionen haben kann, Ihre CSS kleiner zu halten, und die Verringerung der Gesamtzahl der Klassen, die Sie beim Entwerfen von Seiten beachten müssen.

Answer 6

Ich verwende lowCamel für Klassennamen und UpperCamel für IDs. Das ist ziemlich wichtig und ich beziehe diese alte Antwort, weil IMO der Bindestrich-Stil sollte entmutigt werden, sogar Unterstrich ist besser als Bindestrich.

Warum? Weil jede andere Sprache keine Namen mit Bindestrichen enthalten kann. Zum Beispiel kann Ihre IDE die automatische Vervollständigung korrekt aufnehmen oder nicht.(Meine IDE kann nicht, es ist VI: P)

CSS ist eng verwandt mit JavaScript, Bindestrich Klassenname machen es auch schwierig, mit JavaScript zu interopieren. Betrachten Sie die folgende (erfundene) 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(); 
    }); 
} 

Es gibt keinen klaren Vorteil, den Bindestrichen Stil anders als subjektive Ästhetik verwenden. Die Nachteile sind, dass es sich von jeder anderen Programmiersprache abhebt (OK, CSS ist vielleicht keine Programmiersprache, naja ..) und dass es technisch falsch ist.

Die richtige (huh?) Art, ein Leerzeichen darzustellen, ist unterstrichen. Betrachten Sie diesen Ausdruck "einen selbst adressierten Brief", wie kann ich die Leerzeichen konvertieren?

• a_self-addressed_letter (richtig, bewahrt die ursprüngliche Bedeutung)
• a-selbst adressierten Buchstaben (autsch!, Wenn wir es zurück konvertieren wir bekommen "ein sich selbst adressierten Brief"!)

Ist es auch eine Best Practice, immer alle Kleinbuchstaben für CSS-Namen zu verwenden, weil sie nicht zwischen Groß- und Kleinschreibung unterscheiden?

Ich denke, in diesem Fall ist es eine bewährte Methode, immer PascalCasing zu verwenden, weil es die Lesbarkeit erleichtert.

Answer 7

Nach Beispiele zu lesen und meine eigenen Fehler zu machen, landete ich auf diese Lösung für mich:

1. Verwenden Bindestriche Hierarchie zu zeigen, z.B. #products-MainContent {} oder #maincontent-Summary {}. Für mich bedeutet das, dass MainContent ein Kind des Produkts div ist.
2. Großbuchstaben jedes Wort nach dem ersten Element in der Hierarchie für IDs. Verwenden Sie alle Kleinbuchstaben für Klassen, z. #summary-Statistics (ID) oder (Klasse)

Dies funktioniert für mich für jetzt. Ich möchte keine Bindestriche verwenden, um Wörter zu trennen, da ich glaube, dass Bindestriche Abhängigkeit/Beziehungen zeigen sollten. Außerdem möchte ich IDs und Klassen nicht verwechseln, weil sie ähnlich aussehen, also ändere ich den Fall, in dem sie geschrieben wurden.