Sobre la divitis

La divitis es una enfermedad que sufren muchos desarrolladores web: es el uso innecesario de elementos div, algunas veces con varios niveles de anidamiento, para etiquetar una página web.

Si crees que sufres de divitis te recomiendo las siguientes lecturas:

Y también varias entradas que he escrito sobre la divitis:

Otro artículo sobre la divitis

La divitis es una enfermedad antigua, el primer artículo que conozco que habló sobre esta enfermedad es del año 2006: Divitis: what it is, and how to cure it

Ahora he encontrado otro artículo, Stop using so many divs! An intro to semantic HTML, que explica los siguientes problemas de la divitis:

  • Accessibility – Many a11y tools are pretty smart, and try their best to parse the structure of a page to help guide users through it in the way the page’s author intends, and to give users easy jump points to navigate quickly to the section of the page they care about. But <div>s don’t really impart any useful info about the structure of a document. The smartest a11y tool in the world still ins’t a human, and can’t be expected to parse class and id attributes and recognize all the weird and wild ways that devs all over the world name their blocks. I can recognize that class=”article-header-level-2″ is a subheading, but a robot can’t. (And if it can, get it out of my computer, I’m not ready for the AGI revolution just yet.)
  • Readability – To read this code, you need to carefully scan for the class names, picking them out from between the <div class=”…”></div> boilerplate. And once you’re a few levels deep in the markup, it becomes tricky to keep track of which </div> closing tags go with which <div…> opening tags. You start to rely very heavily on IDE features like coloring different indentation levels or highlighting the matching tag for you to keep track of where you are, and in larger documents it can require a lot of scrolling on top of those features.
  • Consistency and standards – It can be frustrating to start a new job or move to a new project and have to learn from scratch all the crazy markup conventions used across the codebase. If everyone had a standardized way to mark up common structures in web documents, it would be much easier to skim an HTML file in an unfamiliar codebase and get a quick handle on what it’s supposed to represent. If only there was such a standard…

A punto de morir por la divitis

La divitis es una enfermedad que tienen muchos desarrolladores web: abusar del uso de la etiqueta div, todo tiene que estar encerrado por una etiqueta div, y un div debe estar encerrado dentro de otro div, y así hasta aburrirse.

Afortunadamente, esta enfermedad tiene cura, sólo hay que leer un poco, por ejemplo Divitis: what it is, and how to cure it y cambiar esta mala costumbre.

Hace unos días estaba dando clase y enseñé la página de Marca a mis alumnos porque nunca falla, siempre tiene miles de errores de validación:

marca-validation

Por alguna razón apareció el tema de la divitis y me pregunté cuántas etiquetas div tiene la página de Marca.

¡1370 etiquetas div!

¡1370 etiquetas div!

¡1370 etiquetas div!

No lo voy a escribir 1370 veces.

marca-div

 

Divitis: abuso de div y span

Acabo de encontrar el artículo Divitis: Abuso de etiquetas div y span. Un artículo muy interesante donde se comenta el mal uso que se hace en muchos casos de las etiquetas div y span.

También explican lo mismo en Errores comunes del desarrollo web:

<span>-mania

Una forma común de estilizar algo con CSS es meterlo dentro de un elemento<span> y ponerle una propiedad con una clase. Estoy seguro que todos hemos visto cosas como <span> y <span>.

¿Por qué? En la mayoría de los casos es completamente innecesario, no tiene valor semántico y hace que el código quede ilegible. Usen elementos de cabecera para la cabecera, pongan párrafos en los elementos de párrafo, hagan listas con los elementos de listas de HTML. Usen CSS para estilizar esos elementos. Si es necesario, añadan atributos de clase o id.

 

Divitis and classitis

Relacionado con <span>-mania. Añadir elementos div y atributos class innecesarios.

Por qué? Ver “<span>-mania” y “falta de semántica”