Quelle est la meilleure pratique pour nommer et encapsuler des classes et IDs multi-mots CSS?

Question

J'essaie de trouver quelle est la meilleure pratique pour nommer et encapsuler les classes CSS et ID, en particulier les noms de mots multiples. Par exemple, disons que j'ai un <div> que je veux nommer "compétences de caractères". Il semble qu'il y ait 3 choix: "characterkills", "character_skills", ou "character-skills".

Lequel d'entre eux est le standard de l'industrie pour nommer les classes et IDs CSS?

Quelle est la meilleure pratique pour diviser plusieurs mots dans les noms de css?

De même, est-ce une bonne pratique de toujours utiliser toutes les minuscules pour les noms de CSS, car ils sont insensibles à la casse?

Answer 1

J'ai également tendance à utiliser le style trait d'union. J'utilise principalement ce style puisque les propriétés CSS suivent le même boîtier. De même, les fonctions JavaScript et les variables ont tendance à utiliser un fond de chameau inférieur. Par exemple, pour modifier une propriété CSS en JavaScript, tapez object.style.textDecoration, mais en CSS, cette propriété sera modifiée avec text-decoration.

Answer 2

Personnellement, j'utilise le style trait d'union (c'est-à-dire some-class) mais vous devez simplement choisir ce qui vous semble le mieux et être cohérent. C'est purement une question d'esthétique.

Answer 3

Je vois les styles de boîtier suivants beaucoup:

characterSkills, CharacterSkills

Mais, à la fin de la journée, peu importe le style que vous choisissez. Juste être cohérent dans votre propre application.

Answer 4

J'ai vu plusieurs réponses différentes à cette question, en fonction de qui vous demandez. Allant à travers toutes les possibilités que vous avez mentionnées et probablement plus. Celui que je vois référencé le plus souvent, cependant, est d'utiliser des underscores (character_skills) et tout en minuscules.

La seule réponse qui est toujours mentionnée mais qui est sans doute plus importante que la méthode que vous choisissez est d'en choisir une et de s'y tenir. Garder les choses uniformes tout au long vous permet d'éviter la confusion et d'autres problèmes plus tard.

Answer 5

J'utilise lowerCamelCase pour les classes et UpperCamel pour les ID, comme ceci:

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

Mais cela fait vraiment absolument aucune différence tant que vous êtes en accord :) Oh, et essayer de coller à ONe mot noms de classe, si possible - vous pouvez toujours combiner les classes, comme ceci:

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

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

... que je préfère, comme vous pouvez avoir vos classes « de base » détiennent des définitions fondamentales, en gardant votre CSS plus petit, et en réduisant la nombre total de classes dont vous devez vous souvenir lors de la conception des pages.

Answer 6

J'utilise lowerCamel pour les noms de classe et UpperCamel pour les ID. Ceci est très important et je suis en train de battre cette vieille réponse parce que le style trait d'union d'OMI devrait être découragé, même si le trait de soulignement est meilleur que le trait d'union.

Pourquoi? Parce que toutes les autres langues ne peuvent pas avoir de noms de variables avec trait d'union. Par exemple, votre IDE peut ou ne peut pas ramasser l'auto-complétion correctement.(Mon IDE ne peut pas, c'est VI: P)

CSS étant étroitement lié à JavaScript, le nom de classe avec trait d'union rend également difficile l'interopérabilité avec JavaScript. Considérez ce qui suit (pièce) 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(); 
    }); 
} 

Il n'y a aucun avantage évident d'utiliser le style autre que l'esthétique césure subjective. Les inconvénients sont qu'il se distingue de tous les autres langages de programmation (OK, CSS peut ne pas être un langage de programmation, eh bien ..) et qu'il est techniquement incorrect.

La façon correcte (hein?) De représenter un espace est le soulignement. Considérez cette expression «une lettre auto-adressée», comment puis-je convertir les espaces?

• a_self-addressed_letter (correcte, préserve le sens original)
• une auto-adressée lettres (aïe! Si nous reconvertir nous obtenons une "auto adressé la lettre"!)

De même, est-ce une bonne pratique de toujours utiliser toutes les minuscules pour les noms de CSS, car ils sont insensibles à la casse?

Je suppose que dans ce cas, il est recommandé de toujours utiliser PascalCasing car cela facilite la lisibilité.

Answer 7

Après avoir lu des exemples et faire mes propres erreurs, je suis tombé sur cette solution pour moi-même:

1. Utilisez des traits d'union pour afficher la hiérarchie par exemple #products-MainContent {} ou #maincontent-Summary {}. Pour moi, cela signifie que MainContent est un enfant de la div de produits.
2. Majuscules chaque mot après le premier élément de la hiérarchie pour les ID. Utilisez toutes les minuscules pour les classes, par exemple. #summary-Statistics (ID) ou .summary-statistics (class)

Cela fonctionne pour moi pour le moment. Je ne veux pas utiliser de traits d'union pour séparer les mots parce que je pense que les traits d'union devraient montrer la dépendance/les relations. De plus, je ne veux pas mélanger les ID et les classes, car ils sont similaires, donc j'ai changé le cas dans lequel ils ont été écrits.