DEV Community

Lupita Code 🌄
Lupita Code 🌄

Posted on • Updated on

¿Cómo ordenar los atributos de los elementos HTML?🤔

¡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="...">
Enter fullscreen mode Exit fullscreen mode

👎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>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (5)

Collapse
syngrowly profile image
Juan Carlos Nahuat

Muchas gracias, lo empezaré a implementar en mi maquetado!

Collapse
lupitacode profile image
Lupita Code 🌄 Author

Es un placer poder ayudar!

Collapse
oscahumbertomr profile image
Oscar Humberto

Wow, ya tengo varios años programando y es algo que nunca tuve en cuenta, muchas gracias

Collapse
lupitacode profile image
Lupita Code 🌄 Author

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...

Collapse
renatoayau profile image
Renato Ayau

No sabía de esta extensión, lo voy a probar gracias por el artículo