Últimamente me entristece ver cómo la maquetación es la parte del trabajo de crear una web que menos se valora, incluso se desprecia. Trabajar con HTML y CSS no es programar, pero también es importante.
Sé programar en PHP y JavaScript, pero cuando alguien me pregunta qué me considero en primer lugar, respondo que soy maquetador. Y bien orgulloso de ello.
A lo largo de mi vida laboral, he coincidido con ya bastantes programadores (de hecho, actualmente trabajo como programador, no como maquetador). En este tiempo, he podido ver cómo la maquetación se considera siempre un trabajo menor: no es programación, por lo tanto no importa.
Ni recuerdo la de veces que habré oído o leído eso de “pon un par de divs, que da igual”. ¿Para qué se esforzará el W3C en crear y documentar multitud de etiquetas si, total, da igual una que otra, verdad?
Pues no da igual. No es lo mismo usar ul que ol o dl. Ni usar a que button. Ni un section que un article. Ni enlazar correctamente un label con su input que no hacerlo. No hablemos ya de la gente que ni siquiera pone label a los elementos de un formulario.
HTML es un lenguaje bastante permisivo y puede que, en apariencia, obtengas un resultado similar. Sin embargo, elegir una etiqueta inadecuada puede tener graves consecuencias para el posicionamiento en buscadores o la accesibilidad de tu web… Claro, que también he perdido la cuenta de las veces que he oído la frase de “los ciegos no están entre el público de nuestra web, da igual”.
En primer lugar, la accesibilidad no sólo consiste en hacer webs para ciegos: hay muchos otros tipos de dificultades como, por ejemplo, las motoras. En segundo, ¿te imaginas tener una tienda física con un cartel de “minusválidos no bienvenidos”? Pues eso es básicamente lo que significa tu “los ciegos no están entre nuestro público objetivo”.
La accesibilidad, el posicionamiento en buscadores, la velocidad de carga, o el rendimiento y el mantenimiento a largo plazo del CSS se consiguen, con relativa facilidad, con una buena planificación desde el inicio del proyecto. Simplemente se necesita tomarse esa parte de la web en serio, aunque no sea programación.
Sin embargo, lo que veo continuamente es una curiosa mezcla de ninguneo y frustración, especialmente en el caso del CSS: es para tontos pero, al mismo tiempo, no hay quien lo entienda.
O una cosa o la otra. Si es para tontos y tú, como buen programador, eres tan listo… ¿cómo es posible que trabajes con CSS así?
Quizá el problema no sea del CSS sino de que nunca te has parado a intentar entenderlo más allá de los 5 minutos que inviertes en:
- Copiar de StackOverflow un código lleno de (obsoletos) prefijos de navegador, que hacen que sólo funcione en Webkit (cuando podría funcionar perfectamente en todos los navegadores).
- Pegarlo al final del archivo estilos.css que nadie en la empresa ha tenido el valor, en años, de organizar (no digamos ya usar SCSS).
- Poner mil !important para forzar que esos estilos “ganen” a los de Bootstrap (framework que, por supuesto, cargáis por completo y sin personalizar aunque no os haga falta ni un 5% de lo que trae).
- Rezar por no ser el próximo que tenga que tocar ese archivo que, ahora, tiene unas 40 líneas más. Felicidades, ya son 25000.
Por cierto, esta lista es una ol (ordered list, lista ordenada) porque es una lista de pasos en donde importa el orden de los elementos. Si quieres que se vea con puntitos, lo haces con CSS, no cambiándola por un ul.
La lista anterior puede parecer una exageración, pero seguro que muchos hemos visto trabajar así con CSS más de una vez.
La gran @diana_aceves_ explicaba en la introducción de uno de sus cursos la causa de este problema: hay muchísima gente que trabaja con CSS, puede que durante años, sin conocer cómo funcionan los principios más básicos del mismo: la cascada (jo**r, tan importante es que aparece en el nombre del lenguaje), el document flow (o lo entiendes bien, o no entenderás de verdad, jamás, cómo funcionan los float o los posicionamientos), las distintas unidades de medida (px, em, rem, %...), etc.
Tanto HTML como CSS han dado un paso de gigante en los últimos años, permitiendo construir webs asombrosas sin necesidad de ayuda de lenguajes de programación. Crear una página que se muestre correctamente en todos los navegadores (sí, incluído Edge) es más fácil que nunca. Quizá va siendo hora de que tú, amigo programador, dejes por un momento de lado ese nuevo framework de JavaScript (el que ahora sí, de verdad de la buena, va a solucionar todos tus problemas, aunque sea muy experimental y tengas que instalar otro polyfill más... y ya van 20) y prestes un poco de atención a la maquetación. Si no lo haces (no todos tenemos que saber de todo), por lo menos respétala y déjala en manos de expertos antes de cometer barbaridades.