This content originally appeared on DEV Community and was authored by Lupita Code ?
¡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!
?Recursos:
Gracias por leer??♀️
Mis redes sociales donde comparto notas de código:
This content originally appeared on DEV Community and was authored by Lupita Code ?
Lupita Code ? | Sciencx (2021-04-21T23:30:17+00:00) ¿Cómo ordenar los atributos de los elementos HTML??. Retrieved from https://www.scien.cx/2021/04/21/como-ordenar-los-atributos-de-los-elementos-html%f0%9f%a4%94/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.