Buenas y malas prácticas en el diseño CSS

CSS es uno de los lenguajes utilizados en la producción de recursos en línea. Junto al HTML y JavaScript, conforma la triada de lenguajes del lado del cliente.

Por cierto, CSS es la sigla de “Cascading Style Sheets”, que se traduce al español como “Hojas de estilos en cascada”.

¿Qué es CSS?

En palabras sencillas, el CSS permite definir la apariencia visual de un documento HTML.

Así, desde este conjunto de instrucciones es posible especificar la familia tipográfica de los párrafos, el color de los encabezados, el tamaño de las secciones y la disposición de la página en diferentes pantallas, entre muchas otras propiedades.

Para conocer más sobre este lenguaje te invito a revisar mi canal e-Lexia.com, donde hay varios recursos sobre el tema.

Buenas prácticas de producción

Sin lugar a duda, la mejor práctica es estudiar a profundidad el lenguaje y, al momento de diseñar, tener a la mano un diccionario. En mi caso, utilizo la biblioteca W3Schools, donde encuentro la documentación completa sobre el estándar.

Sin embargo, hay situaciones donde estos recursos no entregan respuesta a otras consideraciones, como los tiempos de respuesta, la gestión de conocimiento y los flujos de trabajo. Y aquí es donde entra la experiencia que han logrado diseñadores y desarrolladores web.

Aportando un poco al tema, menciono algunas buenas prácticas CSS.

CSS para cada tipo de pantalla

Utilizando la consulta de medios (media query) es posible definir las diferentes reglas y declaraciones CSS que se aplicarán en el sitio web, de acuerdo con la pantalla donde se está visualizando.

Una práctica común es llevar todos los media queries a un único archivo. Esto está bien para sitios web pequeños, pero ¿qué sucede en proyectos donde las reglas superan las 5000 líneas, por ejemplo? Esta situación dificulta la gestión gráfica y genera archivos de mayor peso.

Una recomendación es definir archivos CSS por cada una de las consultas.

En otras palabras, por ejemplo, si el sitio web define tres medias queries viene bien crear tres archivos CSS, que podrían llamarse:

• movil.css
• tableta.css
• escritorio.css

Con esto, la consulta no se realiza desde un archivo general, que contiene todas las declaraciones (se usen o no), sino que la página web, de acuerdo con el dispositivo, solicita un archivo específico, más liviano y con las instrucciones precisas.

Siguiendo el ejemplo anterior, el código HTML que se inserta en el HEAD de cada página es similar a:

<link rel="stylesheet" media="(max-width: 480px)"
href="movil.css" />

<link rel="stylesheet" media="(max-width: 768px)"
href="tableta.css" />

<link rel="stylesheet" media="(min-width: 769px)"
href="escritorio.css" />

Aprovechar el comportamiento en cascada

Una característica fundamental de este lenguaje es la herencia de las reglas. Esta consiste en recuperar instrucciones que se han definido con anterioridad en elementos similares o superiores al que se está marcando.

Por ejemplo, si se define una familia tipográfica Arial para el BODY no es necesario definir la misma declaración para los párrafos, si es que estos utilizan el mismo tipo de letra. Esto agiliza la gestión de estilos y disminuye el peso de los archivos.

Un código de ejemplo:

h1 {
  color:#222222;
  font-family: Arial, sans-serif;
  font-size:24px;
}

p {
  color: #222222;
  font-family: Arial, sans-serif;
  font-size:16px;
}

Puede optimizarse así:

body {
  color: #2222222;
  font-family: Arial, sans-serif;
  font-size:62.5%;
}

h1 {
  font-size:2.4rem;
}

p {
  font-size:1.6rem;
}

Aquí es importante tener claridad, además, sobre el concepto mobile first.

Documentar con comentarios

Independiente si el diseño es para un proyecto propio o de un tercero, siempre viene bien comentar las líneas de código más relevantes.

Los comentarios permiten la gestión de conocimiento y evitan errores en el futuro.

Personalmente, utilizo comentarios sobre reglas CSS que no domino al 100%, como las propiedades de animación.

Para lograr un comentario solo hace falta utilizar /* al inicio del mensaje y */ al final de este.

h1 {
  color: #ff0033; /* Responde a la campaña del mes */
  font-weight:600px;
  text-align:center;
}

Producción de contenidos web

Descarga este libro electrónico de acceso libre, donde se presentan recomendaciones de producción multimedia.
Obtener una copia

Malas prácticas de producción

No es un secreto que, en muchas ocasiones, el diseño CSS puede ocasionar frustración y rechazo, especialmente en sitios web que utilizan numerosas reglas y el comportamiento en cascada comienza a “desbordarse”.

En medio de esos sentimientos negativos se aplican malas prácticas, bajo la excusa: “soluciono con esto, pero más adelante regreso a corregir”. Y ahí, precisamente, comienzan las imprecisiones.

Miremos algunas acciones a evitar:

Abusar del ID

El atributo id se utiliza para marcar como único un elemento de la página web. Esta técnica es común en estructuras de programación, donde se requiere que una pieza específica (por ejemplo, un botón) asuma una instrucción puntual.

A través de CSS es posible aprovechar esta marca para identificar y dar apariencia a un elemento. Sin embargo, no es buen consejo utilizar esta técnica, excepto si hay una correcta gestión de los identificadores únicos, estos se repiten en varias páginas con comportamientos iguales, y los equipos de diseño y desarrollo tienen claridad sobre el tema.

El punto es que las hojas de estilo en cascada tienen mayor valor cuando una regla puede aplicarse a más de un elemento HTML. ¡Esa es la gracia del lenguaje! Si se define una regla tipo id para un solo elemento, se está perdiendo el potencial del CSS.

Sin embargo, y lo menciono desde mi experiencia, hay momentos donde es necesario, especialmente en desarrollos de terceros.

Estilos a nivel de documento y línea

En línea con lo anterior, una mala práctica es definir estilos CSS a nivel de documento o, peor aún, por etiqueta HTML.

El valor del CSS es lograr separar la gestión gráfica de la estructura semántica del documento. Así, si en algún momento se requiere ajustar la apariencia del sitio web no hay necesidad de afectar los contenidos.

Para dejar claridad en este punto, y recurriendo a una situación exagerada, imagine que todos los párrafos del sitio web son similares a:

<p style="color:#333333;font-family:Arial; font-size:16px;text-align:left">
Hola, mundo!
</p>
<p style="color:#333333;font-family:Arial; font-size:16px;text-align:left">
Segunda línea
</p>
<p style="color:#333333;font-family:Arial; font-size:16px;text-align:left">
Tercera línea
</p>

Y le piden cambiar el color #333333 por #343434. ¿No es más fácil tener un archivo CSS externo que gestione todos los párrafos?

Declaración !important

Y profundizando aún más, está la declaración !important.

Esta permite es ignorar cualquier instrucción previa, independiente si está en un CSS externo, en el HEAD o a nivel de línea HTML.

Con !important se está forzando al navegador a definir una declaración CSS.

Su uso puede dificultar la gestión futura de los estilos y, cuando menos, demuestra errores en la construcción semántica de los documentos.

Personalmente, esta declaración la utilizo como último recurso y en productos de terceros. Cuando se trata de diseños propios, para mí, es evidencia que algo estoy haciendo mal.

Invitación

Existen muchas más recomendaciones sobre la producción. Espero regresar pronto con otra lista.

Por lo pronto, te invito a dejar algunos consejos o situaciones que puedan ampliar el conocimiento y la gestión de estilos CSS en un sitio web. ¡La caja de comentarios espera por ti!

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

¡Vamos por los 25.000 suscriptores en YouTube! Suscríbete

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

—

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Buenas y malas prácticas en el diseño CSS por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internaciona . Basada en una obra en https://e-lexia.com/blog .