¿Cómo debo nombrar mis clases de CSS?

¿Cómo deberían ser mis nombres de clase?¿Cómo debo nombrar mis clases de CSS?

Por ejemplo, una clase de CSS para un recuento de votos, ¿cómo debo nombrarlo?

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

¿Cuáles son las ventajas y desventajas de cada uno?
¿Cuál es el más utilizado y por qué?
¿Hay alguna implicación en alguno de estos?
¿Puedo tener mayúsculas en mi CSS?

Fuente

2011-01-22 BrunoLM

Es solo nombrar, por lo que depende de usted lo que quiera. Cualquiera de tus ejemplos funcionaría bien. Solo elige uno y mantente firme.

Los tres primeros selectores abordan elementos individuales, el cuarto aborda un elemento único con dos clases, el quinto aborda un elemento dentro de otro, y el sexto hace lo mismo pero con el elemento interno tiene dos clases.

Probablemente pondría class="Vote" en el elemento de surronding, y fuera class="count" en el elemento de conteo dentro para abordarlo. Utilizo caso Pascal para los elementos y minúsculas para los elementos secundarios dentro de ellos rodea, por lo que me gustaría utilizar:

.Vote .count

Fuente

2011-01-22 15:44:32 Guffa

¿Qué hacer si hay otro subelemento dentro de 'count'? De esa forma, serviría tanto como elemento de elemento secundario como elemento circundante. – poke

@poke: eso depende de cómo se usan. Todas las clases para niños son en minúsculas, pero a veces pongo una clase de alrededor dentro de otra. Todos mis selectores comienzan con un nombre de caso pascal. – Guffa

Esto parece difícil de administrar. Pero suena interesante. – BrunoLM

4, 5 y 6 son especiales

.vote.count-post coincidencias elementos con class="vote count-post", o class="count-post vote" o incluso class="vote something-else count-post".
.vote .count-post elementos partidos class="count-post" que son subelementos de un elemento con class="vote"
y .vote .count.post es una mezcla de los ambos

Entre 1, 2 y 3, todo lo que importa es la preferencia de estilo. Algunas personas prefieren una sobre otra del mismo modo que lo hacen en los lenguajes de programación. Así que simplemente elija lo que prefiera personalmente, o lo que sea más apropiado para usted.

Fuente

2011-01-22 15:43:09 poke

voto por (de 1) utilizar siempre en minúsculas para su CSS. De esa manera no tienes que recordar dónde capitalizas cosas. De modo que elimina (2) y (3).

(5) es realmente dos elementos diferentes por lo que no se puede aplicar a un solo elemento.

(4) y (6) no son válidos para un solo elemento. (4) supone que está aplicando dos clases al mismo elemento como class='vote count-post'. (6) es una combinación de (4) y (5).

Fuente

2011-01-22 15:44:39 Keltex

Veo el primer enfoque mucho (el jQuery UI marco de trabajo CSS lo usa y me parece un muy buen ejemplo para un buen CSS).

Personalmente, no me gustan los camelcas en los nombres de clase de (2) y (3) porque es muy fácil equivocarse (solo escriba VotecountPost y no funcionará).

(4), (5), (6) no son realmente una cosa de la convención, sino más bien selectores diferentes como otros señalaron.

Fuente

2011-01-22 15:45:46 Daff

Wordpress, Drupal, Django todos tienden a usar un estilo a lo largo de las líneas de (1) también. –

No hay una respuesta "correcta" en mi opinión. Tiendo a hacer lo que es más legible, así que elijo (3). En mi opinión, ya hay suficiente texto de estilo palabra-palabra-palabra en html/css. Y al diseñar, p. Ej. Wordpress, creo que es como un mezclador lleno de guiones, difíciles de navegar.

Pero es mi opinión, creo que deberías hacerte una idea de lo que prefieres. Lo que le resulta fácil de leer, cuando mira 8 horas al día en estos debe elegir algo con lo que se sienta cómodo.

Fuente

2011-01-22 15:53:00 plebksig

Sugiero utilizar este .VoteCountPost menos espacio y legible ..

Fuente

2011-01-22 20:45:38 Abudayah

Estoy de acuerdo con Keltex anterior que siempre en minúsculas es más fácil y más fácil de mantener ... sobre todo para otros que puedan necesitar para solucionar o modificar su trabajo.

Sin embargo, también le sugiero que agregue un prefijo a los nombres de la clase css. En proyectos grandes, esto ayuda a identificar rápidamente su fuente y a qué se aplican. También ayuda a evitar colisiones de nombres (y comportamiento impredecible) en un entorno heterogéneo.

Fuente

2013-10-02 19:19:00 Roberto

En mis proyectos que usan jQuery, he determinado que utilizo nombres de clase de dos formas distintas. El primero es para el estilo donde las definiciones se encuentran casi exclusivamente en un archivo .css. El segundo es para los selectores jQuery que tienden a estar aislados en una sola función y están más relacionados con los scripts. Debido a esta división elijo seguir el n. ° 1 para el diseño y el n. ° 2 para los selectores de elementos de jQuery. Si alguien elige Ver fuente, ahora puede determinar las funciones de cada tipo de clase.

Fuente

2014-01-04 19:20:40 user3071858

¿Cómo debo nombrar mis clases de CSS?

Respuesta

Cuestiones relacionadas