Desnúdate para Impresionar; Mira Tus Sitios Web Sin CSS

El HTML está en el núcleo de la web. En ocasiones, en nuestro afán de hacer que las cosas tengan un aspecto atractivo mediante el uso de CSS, lo olvidamos. Si has usado alguna vez Sass (o cualquier compilador de CSS), probablemente habrás visto cómo los estilos de tu sitio web se rompen debido a un error de compilación. Pero antes de lanzarte a solucionar el error que acabas de introducir, tómate esto como una oportunidad para analizar y mejorar el núcleo de tu sitio: el HTML.

“Los errores son simplemente oportunidades para empezar de nuevo, esta vez de forma más inteligente.” — Henry Ford

Normalmente no me mueven los clichés motivacionales. Sin embargo, convertir un error en una oportunidad de éxito puede ser una declaración válida cuando trabajamos con Sass (o cualquier otro compilador de CSS). Ten paciencia conmigo y permíteme explicarme.

Empecemos con un Error

Si has escrito CSS usando Sass, indudablemente te habrás topado en alguna ocasión con un error de compilación. En la línea de comandos tendrá el siguiente aspecto:

Syntax error: Invalid CSS after ".module": expected "{", was "}"

A veces podrías no ver el error en la línea de comandos. Sin embargo, ¡lo verás cuando vuelvas al navegador ya que todo aparecerá roto!

Tu primera reacción podría ser volver de inmediato a tu editor de texto, corregir el error de sintaxis que acabas de introducir, y comprobar cómo todo vuelve a la normalidad. ¡Pero espera un segundo! Este podría ser una de esas ocasiones en las que convertir un “error en una oportunidad”.

Los fallos de Sass pueden ser una excelente oportunidad para ver tu sitio al desnudo, completamente desvestido. Sin ningún estilo, simplemente puro e impoluto HTML, la esencia del núcleo de la web. Verás, cuando el navegador hace una petición, este nos devuelve generalmente una archivo .html—hipertexto puro—y eso es todo. Todo lo demás (por ej. CSS y JavaScript) son embellecimientos. Tal y como Jeremy Keith afirma,

“Cada línea de CSS que escribes es una sugerencia. No estás dictando cómo debería renderizarse el HTML; estás sugiriendo cómo cómo se debería renderizar. Esta idea me parece muy liberadora y empoderadora.”

Las reglas de estilo CSS son una de las primeras mejoras que aplicas al documento HTML y funcionan a modo de sugerencias, no órdenes, sobre cómo debería verse la página. Ver romperse esos estilos puede ser una oportunidad para detenerte y analizar la estructura de tu página web- el HTML- y mejorarlo si fuese necesario. El HTML es un formato con larga trayectoria que ya nos lleva acompañado durante bastante tiempo. No sólo todavía funciona el primer sitio web, ¡también es responsivo en la práctica!

Tal y como afirmó Ian Yates,

“Todos los sitios web son responsivos por defecto, hasta que empezamos a añadir estilos y a romperlos.”

Cuando estés observando el HTML puro de tu página, pregúntate a ti mismo cosas como las siguientes:

1. ¿Tiene sentido la estructura de mi sitio web, es decir, es legible y comprensible por sí misma, sin necesidad de aplicar nada de CSS ( o JavaScript)?
2. ¿Estoy marcando adecuadamente mi contenido, por ej. Usando <ul> para las listas con elementos no ordenados pero sí la etiqueta <dl> cuando estoy definiendo las relaciones entre ellos?
3. ¿Estoy denotando las variaciones del texto de forma rica semánticamente mediante el uso de etiquetas como <strong> y <em> cuando sea apropiado, en lugar de usar la etiqueta genérica <span>?

Tengo una idea: ¿qué tal si pruebas esto en tu propia web ahora mismo? Dirígete a tu sitio web, abre las herramientas para desarrolladores, encuentra el archivo .css que usa, y elimina todas las reglas de estilo.

Consejo: Como alternativa, existen extensiones como Web Developer Plugin para Chrome que te permiten cambiar los estilos CSS fácilmente.

¡Vaya, mira! En mi propio sitio he encontrado posibilidades de mejora. Existen algunos elementos HTML que no son esenciales sin JavaScript. Debería eliminarlos de manera que no estén presentes inicialmente en el DOM y añadirlos después con JavaScript como mejoras. Adicionalmente, algunos componentes de la lista podrían modificarse y unificarse semánticamente. Pero esto no va sobre mí, volvamos a hablar de tu sitio web.

Tu Sitio Web

Navega a través de tu página “desnuda” e intenta leer el contenido. ¿Tiene sentido así? ¿Lo que debería ser un titular está marcado como tal? ¿Los elementos que deberían ser una lista están marcados como listas? Si no es así, reevalúa tu código. El HTML es lo que constituye tu sitio web a su nivel más básico. Justin Jackson tiene un gran ejemplo sobre esto. Una vez tengas un HTML sólido y semántico de base podrás tener la tranquilidad de que aunque no se cargue nada más que el HTML de tu página, los usuarios todavía podrán leer y entender tu mensaje (también los motores de búsqueda).

a11y

El contenido universalmente accesible esencial en la web y siempre es un buen lugar por el que empezar. Hablando sobre la accesibilidad y el enfoque semántico en el diseño web, ya en el 2004 Jeffrey Veen afirmó lo siguiente,

“[Yo proporciono] soluciones a mis clientes cuya implementación es mucho menos compleja, son mucho más fáciles de mantener, cuestan exponencialmente mucho menos servir, funcionan en múltiples servidores y dispositivos, obtienen mejores resultados en la lotería de los motores de búsqueda, y — por supuesto son accesibles para cualquiera…cualquiera…que use la web hoy en día. E intenta usar esto como argumento de valor para el negocio. Y por esto es por lo que no me preocupo de la accesibilidad. Porque cuando el diseño web se practica con oficio y profesionalidad, y no como una concesión, la accesibilidad se dá por sí sola.”

Conclusión

Así que la próxima vez que estés modificando el CSS de tu web con Sass y te encuentres con un error de compilación, tómalo como una oportunidad para examinar el contenido real y la estructura de tu sitio: el HTML. Este podría ser uno de esos momentos en los que un fallo acaba convirtiéndose en una oportunidad genuina para el enriquecimiento que de otra forma nos habríamos perdido.