¡Hola gente bonita!👋
¿Alguna vez te has preguntado si los atributos de los elementos del HTML tienen algún orden? o simplemente no le tomas mucha importancia...
El objetivo de ordenar los atributos es facilitar la lectura del código, es seguir una buena practica o tener un código mas limpio.
Esto permite que cuando busquemos en el código, podemos detectar con facilidad el lugar en especifico donde se encuentran.
🧐¿Cuál es el orden?
He seguido la guía 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 código:
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 más repetido y reutilizable.
Como segundo atributo esta el id, este es más especifico y se debe usar con moderación por eso se coloca en segundo lugar.
Ejemplo
👍Más legible
Siguiendo la guía 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 código están desordenados y es difícil de seguir o buscarlos en un lugar especifico, ahora imagina si tuvieras miles de líneas de código con varios atributos! ¿Difícil verdad?. Ahora si estas trabajando en equipo y tu compañero no ordena los atributos o no sigue un patrón puede que también sea difícil.
⚠️No hay un estándar para ordenar los atributos, puede colocarlos en el orden que desee, pero mi recomendación es que trate de seguir el mismo patrón.
🔗Extensión para vscode
Es difícil aprender de memoria el orden de los atributos o estar ordenando uno por uno, por fortuna existe una extensión para vscode que permite ordenarlos automáticamente, también puedes configurar tu propio orden, esta extensión se llama Sorting HTML and Jade attributes y lo mas cool es que el orden esta basado en la guía de estilos que explique anteriormente!.
▶️ Si prefieres ver mi explicación paso a paso de este tema, el video esta disponible en mi canal de Youtube:
🔎Recursos:
Gracias por leer🦸🏻♀️
Mis redes sociales donde comparto notas de código:
▶️Youtube
📷Instagram
🐦Twitter
🔲Codepen
✍️Medium
🎵Tik Tok
🔵Facebook
Top comments (5)
Muchas gracias, lo empezaré a implementar en mi maquetado!
Es un placer poder ayudar!
Wow, ya tengo varios años programando y es algo que nunca tuve en cuenta, muchas gracias
Hola Oscar! Me alegra que te haya ayudado, también tengo un articulo sobre como ordenar las propiedades en CSS te invito a que cuando tengas tiempo
lo puedas leer :)
dev.to/lupitacode/como-ordenar-las...
No sabía de esta extensión, lo voy a probar gracias por el artículo