Desnudarse para impresionar; Revise sus sitios web sin CSS

HTML es el núcleo de la web. A veces, en la búsqueda de hacer que las cosas se vean hermosas usando CSS, lo olvidamos. Si alguna vez has usado Sass (o un compilador de CSS en general), probablemente hayas visto cómo se rompen los estilos de tu sitio debido a un error de compilación. Pero antes de apresurarse a corregir el error que acaba de presentar, aproveche esta oportunidad para analizar y mejorar el núcleo de su sitio: el HTML.

"El fracaso es simplemente la oportunidad de comenzar de nuevo, esta vez de manera más inteligente". - Henry Ford

Normalmente no soy uno de los clichés motivacionales. Sin embargo, convertir el fracaso en una oportunidad de éxito puede ser cierto cuando se trabaja con Sass (o cualquier compilador de CSS). Ten paciencia conmigo y te lo explicaré..

Comencemos con un error

Si has escrito CSS usando Sass, indudablemente has visto un error de compilación. En la línea de comandos, se ve algo como esto:

Error de sintaxis: CSS no válido después de ".module": esperado "", era ""

A veces es posible que no detecte ese error en la línea de comandos. Sin embargo, indudablemente detectará el error cuando cambie al navegador porque todo aparece roto.!

Su primera reacción podría ser volver instantáneamente a su editor de texto, corregir el error de sintaxis que acaba de presentar y ver cómo todo vuelve a la normalidad. ¡Pero espere un segundo! Este podría ser uno de esos momentos de "convertir el fracaso en una oportunidad"..

Romper Sass puede ser una gran oportunidad para ver su sitio desnudo, completamente desnudo. Sin estilo, solo HTML puro y sin mancha, la esencia de la web en su núcleo. Verás, cuando el navegador realiza una solicitud, generalmente obtiene una respuesta única. .html hipertexto de archivo puro y eso es todo. Todo lo demás (es decir, CSS y Javascript) es una mejora. Como afirma Jeremy Keith,  

“Cada línea de CSS que escribes es una sugerencia. No estás dictando cómo se debe representar el HTML; Usted está sugiriendo cómo se debe representar el HTML. Me parece que es una idea muy liberadora y empoderadora ". 

Las reglas de estilo CSS son algunas de las primeras mejoras que aplica a un documento HTML y actúa como sugerencias, no comandos, por cómo debe verse la página. Ver cómo se rompen esos estilos puede ser una oportunidad para detener y analizar el núcleo de su página web, el HTML, y mejorarlo si es necesario. HTML es un formato a largo plazo que ha existido durante bastante tiempo. El primer sitio web no solo funciona, sino que también es eficaz.! 

Como dijo Ian Yates, 

"Todos los sitios web responden de forma predeterminada, hasta que comenzamos a agregar estilos y a romperlos".

Cuando mire el HTML puro de su página, hágase preguntas como: 

  1. ¿Tiene sentido la estructura HTML de mi sitio, es decir, es legible y comprensible por sí misma, sin ningún CSS (o JavaScript)?? 
  2. ¿Estoy marcando correctamente mi contenido, es decir,.
      para listas desordenadas de artículos, pero una
      Al definir relaciones entre elementos.? 
    • ¿Estoy denotando variaciones semánticamente ricas en el texto usando etiquetas como y Cuando sea apropiado, en lugar de etiquetas genéricas como ?

Tengo una idea: ¿qué tal si prueba esto en su propia página web existente ahora mismo? Vaya a su sitio, abra las herramientas de desarrollo, encuentre el .css archiva los usos de tu sitio y elimina todas las reglas de estilo.

Propina: Alternativamente, las extensiones como el complemento Web Developer para Chrome te permitirán alternar fácilmente los estilos CSS.

¡Mira eso! En mi propio sitio he encontrado espacio para mejorar. Hay algunos elementos HTML que no son esenciales sin JavaScript. Debería eliminarlos para que no estén presentes inicialmente en el DOM y agregarlos más tarde con JavaScript como mejoras. Además, algunos de los componentes de la lista podrían ser ajustados y unificados en semántica. Pero esto no es sobre mí, volvamos a hablar de tu sitio web.

Su sitio web

Navega hacia abajo en tu página "desnuda" e intenta leer el contenido. ¿Tiene sentido? ¿Están las cosas que deberían estar encabezadas como encabezados? ¿Las cosas que deberían ser listas son listas? Si no, vuelva a evaluar su marca. El HTML es lo que constituye su sitio web en su nivel más básico. Justin Jackson tiene un gran ejemplo de esto. Una vez que tenga un HTML semántico sólido para comenzar, puede estar seguro de que incluso si se carga nada más en su página, pero el HTML, los usuarios aún pueden leer y entender su mensaje (los motores de búsqueda también). 

a11y

El contenido de acceso universal es un inquilino central de la web y siempre es un excelente lugar para comenzar. Hablando en 2004 de este enfoque semántico y accesible al diseño web, Jeffery Veen declaró:, 

“[Ofrezco] soluciones para mis clientes que son mucho menos complejas de implementar, mucho más fáciles de mantener, tienen un costo exponencialmente menor de servicio, funcionan en múltiples navegadores y dispositivos, funcionan mejor en la lotería de motores de búsqueda y, por supuesto, son accesibles para todos ... todos ... usando la web hoy. Y tratar de discutir el valor comercial de eso. Y es por eso que no me importa la accesibilidad. Porque cuando el diseño web se practica como un oficio, y no como un consuelo, la accesibilidad es gratuita ".

Conclusión

Entonces, la próxima vez que modifique el CSS de su sitio con Sass y cometa un error de compilación, tómelo como una oportunidad para examinar el contenido real y la estructura de su sitio: el HTML. Podría ser uno de esos momentos en los que una falla termina prestándose a una oportunidad genuina de enriquecimiento que de otra manera se habría perdido..