Consideraciones prácticas para las convenciones de nomenclatura HTML / CSS (sintaxis) [cerrado]

Pregunta: ¿cuáles son las consideraciones prácticas para la sintaxis classy los idvalores?

Tenga en cuenta que no estoy preguntando sobre la semántica , es decir, las palabras reales que se están utilizando, como por ejemplo se describe en este blog . Ya hay muchos recursos en ese lado de las convenciones de nomenclatura, que de hecho oscurecen mi búsqueda de información práctica sobre los diversos bits sintácticos : carcasa, uso de la interpunción (específicamente el -guión), caracteres específicos para usar o evitar, etc.

Para resumir las razones, hago esta pregunta:

• Las restricciones de nombres en la identificación y la clase no conducen naturalmente a ninguna convención
• La abundancia de recursos en el lado semántico de las convenciones de nombres oscurece las búsquedas sobre las consideraciones sintácticas
• No pude encontrar ninguna fuente autorizada sobre esto
• Todavía no había ninguna pregunta sobre los programadores de SE sobre este tema :)

Algunas de las convenciones que he considerado usar:

1. UpperCamelCase, principalmente como un hábito cruzado de la codificación del lado del servidor
2. lowerCamelCase, por coherencia con las convenciones de nomenclatura de JavaScript
3. css-style-classes, que es coherente con el nombre de las propiedades css (pero puede ser molesto cuando se selecciona Ctrl + Shift + ArrowKey en la selección de texto)
4. with_under_scores, que personalmente no he visto usar mucho
5. alllowercase, simple de recordar pero puede ser difícil de leer para nombres más largos
6. UPPERCASEFTW, como una excelente manera de molestar a sus compañeros programadores (quizás combinado con la opción 4 para facilitar la lectura)

Y probablemente también he omitido algunas opciones o combinaciones importantes. Entonces: ¿qué consideraciones hay para nombrar convenciones y a qué convención conducen?

Recompensa o no, hasta cierto punto, la elección siempre será una "cuestión de preferencia". Después de todo, ¿cómo te sentirías si el W3C recomendara (o incluso impusiera) una determinada convención que no creías que fuera correcta?

Dicho esto, sin embargo, personalmente prefiero la lowerCamelCaseconvención, y daré las razones y consideraciones prácticas que he utilizado para decidirme. Lo haré mediante un proceso de eliminación, utilizando la numeración de su pregunta:

(5.) solo tenga en cuenta que es fácil de leer porque no sabe dónde las palabras comienzan y finalizan.

(6.) ASABOVEPLUSITSANNOYINGLIKEESOMEONESHOUTING.

(4.) historical_incompatibility_plus_see: Documentación de desarrollo de Mozilla .

(3.) un poco más complicado de explicar ... como mencionas, la selección en los editores de texto es un problema (como con los guiones bajos, dependiendo del editor), pero para mí también es el hecho de que me recuerda a la sintaxis reservada para palabras clave específicas del proveedor , incluso si comienzan con un guión además de tener palabras separadas por ellos.

Entonces esto deja su (1.) y (2.), UpperCamelCase y lowerCamelCase, respectivamente. A pesar del vínculo mental con las clases de Java (que son, por una convención más claramente definida, UpperCamelCase), los nombres de las clases CSS me parecen, mejor, comenzando con una letra minúscula. Tal vez eso se deba a los nombres de elementos y atributos XHTML , pero supongo que también podría argumentar que tener clases CSS que usen UpperCamelCase ayudaría a distinguirlos. Si necesita otra razón, lowerCamelCase es lo que el W3C usa en ejemplos para buenos nombres de clase (aunque la URL en sí, molesta, no está de acuerdo conmigo).

Aconsejaría en contra (4.), (5.) y (6.), por las razones indicadas anteriormente, pero suponga que se podrían hacer argumentos para cualquiera de los otros tres.

Sin embargo, si usted (o cualquier otra persona) está de acuerdo conmigo en este asunto, depende de usted. El hecho de que no haya recibido una respuesta definitiva citando fuentes autorizadas por ahora puede tomarse como una pista de que no existe un estándar definido sobre este tema (de lo contrario, todos lo estaríamos usando). No estoy seguro de que sea necesariamente algo malo.

Las palabras en los nombres de clase CSS deben separarse con guiones ( class-name), ya que así es como se separan las palabras en las propiedades CSS y las pseudo-clases y su sintaxis se define mediante las especificaciones CSS .

Las palabras en los nombres de identificación también deben separarse con guiones, para que coincidan con el estilo sintáctico de los nombres de clase y porque los nombres de identificación a menudo se usan en las URL y el guión es el separador de palabras original y más común en las URL.

Es sobre todo una cuestión de preferencia; No existe un estándar establecido, y mucho menos una fuente autorizada, sobre el asunto. Use lo que le resulte más cómodo; solo se consistente.

Personalmente, uso css-style-with-dashes, pero trato de evitar los nombres de clase de varias palabras y uso varias clases siempre que sea posible (en button important defaultlugar de hacerlo button-important-default). Desde mi experiencia, esta también parece ser la opción más popular entre los sitios web y marcos de alta calidad.

Las minúsculas con guiones también son más fáciles de escribir que las otras opciones (excluyendo la nowordseparatorswhatsoeverconvención difícil de leer ), al menos en los teclados de EE. UU., Ya que no requiere el uso de la tecla Mayús.

Para las identificaciones, existe la consideración práctica adicional de que si desea hacer referencia a elementos por su ID directamente en javascript (por ejemplo document.forms[0].btn_ok), los guiones no funcionarán tan bien, pero luego, si está usando jQuery, probablemente vaya a utilícelos de todos $()modos, para que pueda tenerlos , lo $('#btn-ok')que hace que este punto sea discutible.

Para el registro, otra convención me encuentro con regularidad utiliza verrugas húngaras en ID para indicar el tipo de elemento, especialmente para los controles de formulario - por lo que tendría #lblUsername, #tbUsername, #valUsernamepara el sello nombre de usuario, de entrada, y el validador.

Creo firmemente que lo que más importa es la consistencia.

Hay dos maneras de ver esto:

1. Se puede hacer un buen argumento a favor alllowercaseo css-style-clauses(probablemente la mejor opción) porque serán los más consistentes con el código en el que se encontrarán. Prestará un flujo más natural al código en general y nada será discordante o fuera de lugar .

2. Se puede hacer un argumento igualmente bueno para un estilo que sea distinto de los nombres de etiquetas HTML o las cláusulas CSS, si diferenciará los ID y las clases de una manera que ayude a la legibilidad. Por ejemplo, si usó UpperCamelCaseID y clases, y no lo usó para ningún otro constructo o propósito, sabría que había tocado uno cada vez que veía un token en ese formato. Una restricción que esto podría imponer es que sería más efectivo si cada ID o clase fuera un nombre de más de 2 palabras, pero eso es razonable en muchos casos.

Al escribir esta respuesta, descubrí que estoy mucho más inclinado hacia la segunda opción, pero dejaré ambos porque creo que ambos casos tienen mérito.

Es todo una cuestión de preferencia realmente, o cuestión de pereza. CamelCasing es más fácil de escribir, pero prefiero usar la notación de subrayado, ya que personalmente me resulta más fácil de leer y depurar que CamelCase. No hay una sola convención de codificación establecida, nunca he trabajado en un lugar que tenga las mismas pautas de codificación que el lugar anterior.

La mayoría de las compañías tienen pautas que generalmente debe cumplir para mantener el código limpio y más fácil para todos. Si es un profesional independiente, puede hacerlo todo, ya que es la única persona que trabaja en el código. En mi opinión, solo hay dos convenciones de codificación a seguir: notación CamelCase o subrayado. Mi consejo es elegir uno y luego seguir con él.

Parece ajeno a un simple hecho: la mayoría de los CSS no los realizan los programadores .

Está hecho por diseñadores gráficos.

No les importa nuestra guerra de edición y no podría importarles menos lo que hacemos con la tecla Mayús.
Ni siquiera saben dónde está esa _llave elegante . (o como se llame)

No les importa la estética del código , les importa la estética estética .

(Y pueden tener un punto allí)

No leen las especificaciones , reciben el tutorial.
Y luego verifique las referencias en w3schools.

Algunos de ellos probablemente creen que no pueden usar nombres de clase en mayúsculas por razones.
Están llenos de conceptos erróneos extraños, en su mayoría irrelevantes.