Saltar al contenido

¿Cuál es la convención de nomenclatura estándar para ids y clases html/css?

Nuestro team redactor ha pasado horas investigando para darle espuestas a tus búsquedas, te ofrecemos la respuestas así que esperamos resultarte de gran apoyo.

Solución:

No hay uno.

Uso guiones bajos todo el tiempo, debido a que los guiones estropean el resaltado de sintaxis de mi editor de texto (Gedit), pero eso es una preferencia personal.

He visto todas estas convenciones usadas por todas partes. Use el que crea que es mejor: el que se ve mejor/más fácil de leer para usted, así como el más fácil de escribir porque lo usará mucho. Por ejemplo, si tiene su guión bajo key en la parte inferior del teclado (poco probable, pero totalmente posible), luego adhiérase a los guiones. Solo ve con lo que es mejor para ti. Además, las 3 convenciones son fáciles de leer. Si está trabajando en un equipo, recuerde cumplir con la convención especificada por el equipo (si corresponde).

Actualización 2012

He cambiado la forma en que programo con el tiempo. Ahora uso camel case (thisIsASelector) en lugar de guiones ahora; Este último me parece bastante feo. usa lo que sea usted prefiere, que puede cambiar fácilmente con el tiempo.

Actualización 2013

Parece que me gusta mezclar las cosas cada año… Después de cambiar a Sublime Text y usar Bootstrap por un tiempo, he vuelto a los guiones. Para mí, ahora se ven mucho más limpios que un_der_scores o camelCase. Sin embargo, mi punto original sigue en pie: hay no es un estandar.

Actualización 2015

Un caso de esquina interesante con convenciones aquí es Rust. Me gusta mucho el lenguaje, pero el compilador te avisará si defines cosas usando otra cosa que no sea underscore_case. Puede desactivar la advertencia, pero es interesante que el compilador sugiera una convención por defecto. Me imagino que en proyectos más grandes conduce a un código más limpio, lo cual no es malo.

Actualización 2016 (tú lo pediste)

He adoptado el estándar BEM para mis proyectos en el futuro. Los nombres de las clases terminan siendo bastante detallados, pero creo que les da una buena estructura y reutilización a las clases y al CSS que las acompaña. supongo que BEM es en realidad un estándar (así que mi no se convierte en un yes tal vez) pero aún depende de usted lo que decida usar en un proyecto. Lo más importante: sé coherente con lo que elijas.

Actualización 2019 (tú lo pediste)

Después de no escribir CSS durante bastante tiempo, comencé a trabajar en un lugar que usa OOCSS en uno de sus productos. Personalmente, me resulta bastante desagradable tirar basura a las clases en todas partes, pero no tener que saltar entre HTML y CSS todo el tiempo se siente bastante productivo.

Sin embargo, todavía estoy decidido por BEM. Es detallado, pero el espacio de nombres hace que trabajar con él en los componentes de React sea muy natural. También es excelente para seleccionar elementos específicos cuando se prueba el navegador.

OOCSS y BEM son solo algunos de los estándares CSS que existen. Elija uno que funcione para usted: todos están llenos de compromisos porque CSS simplemente no es tan bueno.

Actualización 2020

Una actualización aburrida este año. Todavía estoy usando BEM. Mi posición realmente no ha cambiado desde la actualización de 2019 por las razones enumeradas anteriormente. Use lo que funcione para usted que se adapte al tamaño de su equipo y oculte tanto o tan poco del conjunto de características deficientes de CSS como desee.

Hay una guía de estilo css&html de google, que recomienda usar siempre un guión: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters.

Le sugiero que use un guión bajo en lugar de un guión (-), ya que…

puede acceder al valor por id fácilmente de esa manera. Pero si usa un guión, provocará un error de sintaxis.

Esta es una muestra antigua, pero puede funcionar sin jquery – 🙂

gracias a @jean_ralphio, hay una forma de evitarlo

var x = document.myForm['my-Id'].value;

Dash-style sería un estilo de código de Google, pero realmente no me gusta. Preferiría TitleCase para id y camelCase para clase.

Tienes la opción de apoyar nuestra publicación añadiendo un comentario o dejando una valoración te lo agradecemos.

¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *