La vida del diseñador web está llena de pequeños ajustes de diseño que pueden terminar consumiendo una cantidad desproporcionada de tiempo. Estas 4 clases pequeñas pero potentes —que nos gusta llamar clases de "ayuda"— pueden simplificar y acelerar esos cambios, ya sea que estés eliminando estilos predeterminados o simplemente invirtiendo los colores del texto.
Ahora, vamos con las clases:
Sin margen
Cuando has elaborado cuidadosamente la guía de estilo viva de tu sitio web, añadiendo la cantidad justa de margen a tus titulares y sangrías a tus párrafos, lo último que quieres es empezar a añadir un millón de clases combinadas diferentes a tus elementos.
Esto no solo sobrecargará tu CSS, aumentando los tiempos de carga, sino que también hará que los cambios globales sean mucho más difíciles de realizar en el futuro.
Uso de sin margen
Supongamos que necesitas añadir un H3 y un H5 junto a un logotipo para una página de estudio de caso. Dado el diseño que se muestra a continuación, quieres que se apilen de forma compacta y se alineen con el logotipo para mantener el equilibrio compositivo.
¿La solución? Añade una clase llamada "Sin margen" donde estableceremos el margen en todos los lados a 0px.
Y el valor de esta pequeña clase no se limita a los encabezados. De hecho, puedes usarla siempre que necesites eliminar los márgenes de cualquier elemento.
Llevando el concepto de sin margen más allá
Para llevar este concepto de "sin margen" aún más lejos, puedes crear clases para eliminar márgenes de un solo lado, de dos lados opuestos, etc. A menudo añado "Sin margen inferior", "Sin margen superior" y "Sin margen izquierdo" a los proyectos para hacer precisamente eso.
Centrado
Por lo general, si tu idioma se lee de izquierda a derecha, lo mejor es alinear el contenido de texto a la izquierda con el margen derecho irregular (como en este blog). Especialmente en pasajes más largos.
Dicho esto, sin duda te encontrarás queriendo o necesitando centrar el texto de vez en cuando.
Tomando el ejemplo de abajo, tenemos una sección principal seguida de una sección de cita. El elemento de cita en bloque está alineado a la izquierda por defecto, pero quiero que este bloque de cita esté centrado. Como no quiero añadir una clase única nueva al bloque de cita ya estilizado, podemos configurar una clase de ayuda global llamada "Centrado".
Es tan sencillo como añadir una nueva clase combinada de "Centrado" y luego establecer la alineación del texto al centro. Fácil, ¿verdad?
Uso de centrado
Llevando el centrado más allá
Puedes llevar este concepto fácilmente más allá con una variedad de estilos tipográficos.
Imagina que solo quieres usar mayúsculas iniciales en el titular principal de tus páginas y dejar el resto en formato de oración. Crea una clase auxiliar de "Título" y ¡listo!, no tendrás que tocar tu jerarquía tipográfica. ¿O quizás a tus editores les gusta el clásico estilo tachado irónico? La idea es la misma: crea una clase auxiliar de "Tachado" y estarás tachando palabras en un abrir y cerrar de ojos.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Blanco
Pocos sitios web se limitan a un solo color de texto. Por ejemplo, podrías usar #666 para el cuerpo del texto, pero algunos de tus titulares se superponen a imágenes de fondo. O tal vez uses cuadros de texto destacados para llamadas a la acción y citas.
En esos momentos, probablemente necesites "invertir" el texto, es decir, ponerlo en blanco (o en otro color de alto contraste) para que resalte sobre un fondo oscuro.
Aquí es donde entra en juego una clase auxiliar de "Blanco". Configura una clase combinada llamada "Blanco" y simplemente cambia el color del texto a #ffffff. Podrás usarla una y otra vez en todo tu sitio sin afectar nunca tus elementos de texto cuidadosamente diseñados; solo cambiará el color de la fuente.
La clase "Blanco" en uso
Margen derecho
A estas alturas, probablemente ya te estés haciendo una idea de cómo usar las clases auxiliares en tu flujo de trabajo. Pero antes de terminar, aquí tienes otra que uso habitualmente.
Cuando trabajo con iconos, añado una clase global de "Icono" y cambio el ancho. Normalmente, como la estructura de una página define su posición en relación con otros elementos, cambiar el ancho es suficiente. Pero a veces coloco un icono en un diseño flexbox para que quede alineado con un elemento de texto; esto elimina el espacio entre ambos y no queda muy bien. Para solucionarlo, añado una clase auxiliar de "Margen derecho" con un ancho de 5px.
Y ahora puedes usar esta clase auxiliar en todo el sitio en muchos elementos sin tener que lidiar con estilos adicionales.
Margen derecho en uso
Ampliando la idea del margen derecho
A menudo configuro algunas clases auxiliares diferentes en torno a esta idea de los márgenes.
Por ejemplo, 5 píxeles no siempre son suficientes, así que crearé un "Margen derecho 20", con un margen derecho de 20 píxeles (¡qué sorpresa!). Puedes ampliar esta idea en todas las direcciones y con cualquier valor. La clave es poder reutilizar una clase una y otra vez en muchos elementos.
¿Usas clases auxiliares?
Este concepto es muy extensible y lo anterior ofrece solo algunas de las clases auxiliares más comunes que uso en mis proyectos. Espero que este artículo ayude a agilizar tu flujo de trabajo. Y si has descubierto esta idea por tu cuenta, ¡cuéntanos en los comentarios cuáles te resultan más útiles!
