¿Cómo ordenar los atributos de los elementos HTML?🤔
Tags: html, codenewbie, spanish, latam
Published: 2021-04-21 23:30:17

¡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](https://codeguide.co/) 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](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-attrs-sorter) 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](https://youtube.com/lupitacode):

{% youtube F7h_aABiEGk %}

##🔎Recursos:
* [Guía de estilo](https://codeguide.co/#html-attribute-order)
* [Extensión](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-attrs-sorter)

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

[▶️Youtube](https://www.youtube.com/lupitacode)
[📷Instagram](https://instagram.com/lupitacode)
[🐦Twitter](https://twitter.com/lupitacode)
[🔲Codepen](https://codepen.io/lupitacode/)
[✍️Medium](https://lupitacode.medium.com/)
[🎵Tik Tok](https://www.tiktok.com/@lupitacode)
[🔵Facebook](https://facebook.com/lupitacode)