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

Existe una guía de estilo css y html de Google, que recomienda usar siempre un guion: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

Sugiero que uses un guion bajo en lugar de un guion (-), 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 en así. Pero si usas un guion causará un error de sintaxis.

Este es un ejemplo antiguo, pero puede funcionar sin jquery -:)

No hay una convención de nomenclatura 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, podrían estar separadas por guiones.

Coche-nuevo-girado-a la derecha

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

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

Nota: los verbos (acciones) deben estar en pasado (turned, did, ran, etc.).

Relación

Los objetos también pueden tener relaciones como padre e hijo. La Acción y el Descriptor de Acción pertenecen al objeto padre, no pertenecen al objeto hijo. Para las relaciones entre objetos se puede usar un subrayado.

Car-new-turned-right_wheel-left-turned-left

• coche-nuevo-girado a la derecha (sigue la regla de propiedad)
• rueda-izquierda-vuelta-izquierda (sigue la regla de propiedad)
• car-new-turned-right_wheel-left-turned-left (sigue la relación rule)

Notas Finales:

• Debido a que 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.
• Saber cuándo usar una clase y cuándo usar un id. No se trata solo de un id que se utiliza una vez en la página web. La mayoría de las veces, quieres usar una clase y no un id. Componentes web como (botones, formularios, paneles,...etc) siempre debe usar una clase. Los ID pueden conducir fácilmente a conflictos de nombres, y deben usarse con moderación para el espacio de nombres de su marcado. Los conceptos anteriores de propiedad y relación se aplican a los nombres de clases e ID, y le ayudarán a evitar conflictos de nombres.
• Si no te gusta mi convención de nomenclatura CSS, también hay varias otras: Convención de nomenclatura estructural, Convención de nomenclatura Presentacional, Convención de nomenclatura semántica, convención de nomenclatura BEM, convención de nomenclatura OCSS, etc.

Solo un estándar alternativo más a considerar:

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

Y en tu guión:

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

Esto solo usa un camelCase, under_score y guion 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 hacen que sea más fácil detectar errores. por ejemplo: Si ves .unknown_name o #unknownName en tu archivo CSS, sabes que necesitas averiguar a qué se refiere en realidad a.

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

Usando atajos de teclado como la opción + izquierda/derecha (o ctrl+izquierda/ derecha en Windows) para recorrer el código palabra por palabra detiene el cursor en cada guión, lo que le permite recorrer con precisión el id o el nombre de la clase utilizando atajos de teclado. Los guiones bajos y camelCase no se detectan y el cursor se desplazará directamente sobre ellos como si fuera uno una sola palabra.

Acabo de empezar a aprender XML. La versión de subrayado 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: Puede que no esté relacionado, pero aquí hay un enlace para reglas y recomendaciones sobre cómo nombrar elementos XML que sigo al nombrar ID (secciones "Reglas de nomenclatura XML" y " Mejor nomenclatura Practicar").

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