¿Cuál es la mejor práctica para nombrar y codificar clases CSS e identificadores de varias palabras?

Question

Estoy tratando de averiguar cuál es la mejor práctica para nombrar y codificar clases e identificadores CSS, especialmente nombres de varias palabras.

Así, por ejemplo, supongo que tengo un <div> al que quiero llamar "habilidades de caracteres". Parece que hay 3 opciones: "characterskills", "character_skills", o "character-skills".

¿Cuál de estos es el estándar de la industria para nombrar las clases e ID de CSS?

¿Cuál es la mejor práctica para dividir varias palabras en nombres css?

También es una buena práctica usar siempre todas las minúsculas para los nombres de css, porque no distinguen entre mayúsculas y minúsculas?

Answer 1

Tiendo a usar el estilo con guiones también. Principalmente uso ese estilo ya que las propiedades CSS siguen la misma carcasa. Del mismo modo, las funciones y variables de JavaScript tienden a utilizar una caja de camello inferior. Por ejemplo, para cambiar una propiedad CSS en JavaScript, escribiría object.style.textDecoration, pero en CSS, esa propiedad se cambiaría con text-decoration.

Answer 2

Yo personalmente uso el estilo con guiones (es decir, some-class) pero simplemente debe elegir lo que siente es mejor y ser coherente. Es puramente una cuestión de estética.

Answer 3

veo los siguientes estilos de revestimiento mucho:

characterSkills, CharacterSkills

pero, al final del día no importa qué estilo que elija. Solo sé coherente dentro de tu propia aplicación.

Answer 4

He visto varias respuestas diferentes a esta pregunta, dependiendo de a quién se lo pregunte. Abarcando todas las posibilidades que mencionaste y probablemente más. Sin embargo, la que veo referenciada más a menudo es usar guiones bajos (character_skills) y todo en minúsculas.

La única respuesta que siempre se menciona sin embargo, y podría decirse que es más importante que el método que elija, es elegir una y mantenerla en todo momento. Mantener las cosas uniformes en todo le permite evitar confusiones y otros problemas más adelante.

Answer 5

utilizo lowerCamelCase para las clases, y UpperCamel para los ID, así:

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

Pero lo que realmente hace absolutamente ninguna diferencia, siempre y cuando eres consistente :) Ah, y tratar de atenerse a uno nombres de las clases de palabras cuando sea posible - siempre se puede combinar clases, así:

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

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

... que yo prefiero, como usted puede tener sus clases "base" tienen definiciones básicas, manteniendo la CSS más pequeño, y la reducción de la número total de clases que debe recordar al diseñar páginas.

Answer 6

Uso lowerCamel para los nombres de clase y UpperCamel para los ID. Esto es bastante importante y estoy superando esta vieja respuesta porque IMO, el estilo con guiones debería ser desalentado, incluso el subrayado es mejor que con guiones.

¿Por qué? Porque cualquier otro idioma no puede tener nombres de variables con guiones. Por ejemplo, su IDE puede o no recoger la autocompletación correctamente.(Mi IDE no puede, es VI: P)

CSS está estrechamente relacionado con JavaScript, el nombre de clase con guiones también dificulta la interoperabilidad con JavaScript. Considere lo siguiente (artificial) de 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(); 
    }); 
} 

No hay ninguna ventaja clara para usar el estilo con guión aparte de la estética subjetivos. Las desventajas son que se destaca de cualquier otro lenguaje de programación (OK, CSS puede no ser un lenguaje de programación, bueno ...) y que es técnicamente incorrecto.

La forma correcta (¿eh?) De representar un espacio es guión bajo. Considere esta frase "una carta con dirección propia", ¿cómo puedo convertir los espacios?

• a_self-addressed_letter (correcto, conserva el significado original)
• una con su dirección y letras (¡ay! Si nos convertimos de nuevo obtenemos "un uno mismo dirigido letra"!)

También es una buena práctica usar siempre todas las minúsculas para nombres CSS, porque no distinguen entre mayúsculas y minúsculas?

Supongo que en este caso, es una buena práctica usar siempre PascalCasing porque ayuda a la legibilidad.

Answer 7

Después de leer ejemplos y haciendo mis propios errores, que aterrizó en esta solución para mí:

1. utilizar guiones para mostrar la jerarquía, por ejemplo, #products-MainContent {} o #maincontent-Summary {}. Para mí esto significa que MainContent es un elemento secundario de los productos div.
2. Capitalice cada palabra después del primer elemento en la jerarquía para ID. Use todas las minúsculas para las clases, p. #summary-Statistics (ID) o .summary-statistics (clase)

Esto funciona para mí por el momento. No quiero usar guiones para separar palabras porque creo que los guiones deben mostrar dependencia/relaciones. Además, no quiero mezclar identificaciones y clases porque se ven similares, así que cambié el caso en el que se escribieron.