usar selectores para entre ejemplo div diferencia como html css naming-conventions standards

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



selectores id y class en css (7)

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 .

¿Depende de la plataforma que está utilizando o existe una convención común que la mayoría de los desarrolladores sugieren / siguen?

Hay varias opciones:

  1. id="someIdentifier"'' - se ve bastante consistente con el código de javascript.
  2. id="some-identifier" : se parece más a los atributos similares a html5 y otras cosas en html.
  3. id="some_identifier" - se ve bastante consistente con el código ruby ​​y sigue siendo un identificador válido dentro de Javascript

Estaba pensando que los números 1 y 3 anteriores tienen más sentido porque juegan mejor con Javascript.

¿Hay una respuesta correcta para esto?

No existe una convención de nombres acordada para HTML y CSS. Pero podrías estructurar tu nomenclatura alrededor del diseño de objetos. Más específicamente, lo que llamo Propiedad y relación.

Propiedad

Las palabras clave que describen el objeto se pueden separar por guiones.

coche-nuevo-convertido-derecho

Las palabras clave que describen el objeto también pueden clasificarse en cuatro categorías (que deben ordenarse de izquierda a derecha): Objeto, Descriptor de objeto, Acción y Descriptor de acción.

coche - un sustantivo y un objeto
nuevo - un adjetivo y un descriptor de objeto que describe el objeto con más detalle
turned - un verbo, y una acción que pertenece al objeto
derecha, un adjetivo y un descriptor de acción que describe la acción con más detalle

Nota: los verbos (acciones) deben estar en tiempo pasado (girado, hecho, ejecutado, etc.).

Relación

Los objetos también pueden tener relaciones como padre e hijo. Action y Action-Descriptor pertenecen al objeto primario, no pertenecen al objeto secundario. Para las relaciones entre objetos, podría usar un guión bajo.

car-new-turned-right_wheel-left-turned-left

  • car-new-turned-right (sigue la regla de propiedad)
  • wheel-left-turned-left (sigue la regla de propiedad)
  • car-new-turned-right_wheel-left-turned-left (sigue la regla de relación)

Notas finales:

  • Como CSS no distingue entre mayúsculas y minúsculas, es mejor escribir todos los nombres en minúsculas (o mayúsculas); evite camel-case o pascal-case ya que pueden conducir a nombres ambiguos.
  • Sepa cuándo usar una clase y cuándo usar una identificación. No se trata solo de que se use una identificación una vez en la página web. La mayoría de las veces, quiere usar una clase y no una identificación. Los componentes web como (botones, formularios, paneles, ... etc.) siempre deben usar una clase. Id''s puede conducir fácilmente a conflictos de nombres, y debe usarse con moderación para el espacio de nombres de su marcado. Los conceptos anteriores de propiedad y relación se aplican a la denominación de las clases y los identificadores, y le ayudarán a evitar conflictos de nombres.
  • Si no te gusta mi convención de nomenclatura de CSS, también hay varias otras: convención de nomenclatura estructural, convención de nomenclatura de presentación, convención de nomenclatura semántica, convención de nomenclatura de BEM, convención de nomenclatura de OCSS, etc.

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 esa es una preferencia personal.

He visto todas estas convenciones utilizadas por todos lados. Usa el que creas que es el mejor, el que te parezca más fácil de leer y el más fácil de escribir porque lo usarás mucho. Por ejemplo, si tienes la tecla de guión bajo en la parte inferior del teclado (poco probable, pero totalmente posible), entonces mantén los guiones. Solo ve con lo que es mejor para ti. Además, las 3 de estas convenciones son fáciles de leer. Si trabaja en equipo, recuerde cumplir con la convención especificada por el equipo (si corresponde).

Actualización 2012

Cambié la forma en que programo con el tiempo. Ahora uso camel case ( thisIsASelector ) en lugar de guiones ahora; Encuentro este último algo feo. Usa lo que prefieras, que puede cambiar fácilmente con el tiempo.

Actualización 2013

Parece que me gusta mezclar cosas cada año ... Después de cambiar a Sublime Text y usar Bootstrap por un tiempo, volví a los guiones. Para mí, ahora se ven mucho más limpios que un_der_scores o camelCase. Mi punto original aún se mantiene: no hay un estándar.

Actualización 2015

Un caso de esquina interesante con convenciones aquí es Rust . Realmente me gusta el lenguaje, pero el compilador te advertirá si defines cosas usando algo 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 que no es malo.

Actualización 2016 ( you solicitó)

He adoptado el estándar BEM para mis proyectos en el futuro. Los nombres de las clases terminan siendo bastante detallados, pero creo que dan una buena estructura y reutilización a las clases y CSS que los acompañan. Supongo que BEM es en realidad un estándar (por lo que mi no convierte en yes tal vez), pero depende de ti lo que decidas usar en un proyecto. Lo más importante: sea coherente con lo que elija.

Otra razón por la que muchos prefieren los guiones en la identificación de CSS y los nombres de clase es la funcionalidad.

Usar atajos de teclado como opción + izquierda / derecha (o ctrl + izquierda / derecha en Windows) para recorrer el código palabra por palabra detiene el cursor en cada guion, permitiéndole atravesar con precisión el nombre de identificación o clase usando atajos de teclado. Los signos de subrayado y camelCase no se detectan y el cursor se desplazará sobre ellos como si fuera una sola palabra.

Recientemente comencé a aprender XML. La versión de guión bajo me ayuda a separar todo lo relacionado con XML (DOM, XSD, etc.) de lenguajes de programación como Java, JavaScript (camel case). Y estoy de acuerdo con usted en que el uso de identificadores que están permitidos en los lenguajes de programación se ve mejor.

Editar: podría no estar relacionado, pero aquí hay un enlace para las reglas y recomendaciones sobre el nombre de los elementos XML que sigo al nombrar identificadores (secciones "Reglas de nombres XML" y "Mejores prácticas de nomenclatura").

http://www.w3schools.com/xml/xml_elements.asp

Solo una norma alternativa más a considerar:

<div id="id_name" class="class-name"></div>

Y en tu script:

var variableName = $("#id_name .class-name");

Esto solo usa un camelCase, under_score y hyphen-ation respectivamente para variables, ids y clases. He leído sobre este estándar en un par de sitios web diferentes. Aunque un poco redundante en los selectores css / jquery, las redundancias facilitan la detección de errores. Por ejemplo: si ve .unknown_name o #unknownName en su archivo CSS, sabrá que necesita averiguar a qué se refiere en realidad.

Te sugiero que uses un guión bajo en lugar de un guión (-), ya que ...

<form name="myForm"> <input name="myInput" id="my-Id" value="myValue"/> </form> <script> var x = document.myForm.my-Id.value; alert(x); </script>

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

Esta es una muestra antigua, pero puede funcionar sin jquery - :)