Cmo ordenar los atributos de los elementos HTML?

Hola gente bonita!

Alguna vez te has preguntado si los atributos de los elementos del HTML tienen algn orden? o simplemente no le tomas mucha importancia...

El objetivo de ordenar los atributos es facilitar la lectura del cdigo, es seguir una buena practica o tener un cdigo mas limpio.
Esto permite que cuando busquemos en el cdigo, podemos detectar con facilidad el lugar en especifico donde se encuentran.

Cul es el orden?

He seguido la gua de estilos del creador de Bootstrap: Mark Otto, el nos explica que los atributos deben venir en este orden particular para facilitar la lectura del cdigo:

• class
• id , name
• data-*
• src, for, type, href, value
• title, alt
• role, aria-*

Como puedes notar el primer atributo que debe colocarse en una etiqueta es el atributo class, esto es porque, es el atributo ms repetido y reutilizable.

Como segundo atributo esta el id, este es ms especifico y se debe usar con moderacin por eso se coloca en segundo lugar.

Ejemplo

Ms legible

Siguiendo la gua de estilo:

<a class="..." id="..." data-toggle="modal" href="#">  Example link</a><input class="form-control" type="text"><img src="..." alt="...">

Menos legible

Qu pasa si tenemos varios enlaces?

<a href="#" class="..." id="..." data-toggle="">  Example link</a><a  id="..." data-toggle="" class="..." href="#">  Example link</a><a  id="..." class="..." href="#" data-toggle="">  Example link</a>

Como puedes observar los atributos en el cdigo estn desordenados y es difcil de seguir o buscarlos en un lugar especifico, ahora imagina si tuvieras miles de lneas de cdigo con varios atributos! Difcil verdad?. Ahora si estas trabajando en equipo y tu compaero no ordena los atributos o no sigue un patrn puede que tambin sea difcil.

No hay un estndar para ordenar los atributos, puede colocarlos en el orden que desee, pero mi recomendacin es que trate de seguir el mismo patrn.

Extensin para vscode

Es difcil aprender de memoria el orden de los atributos o estar ordenando uno por uno, por fortuna existe una extensin para vscode que permite ordenarlos automticamente, tambin puedes configurar tu propio orden, esta extensin se llama Sorting HTML and Jade attributes y lo mas cool es que el orden esta basado en la gua de estilos que explique anteriormente!

Recursos:

• Gua de estilo
• Extensin

Gracias por leer
Mis redes sociales donde comparto notas de cdigo:

Instagram
Youtube