El desarrollo web y la Web siguen creciendo de forma rápida. Por tanto, desarrollar CSS desde cero, para cada proyecto, además de ser “doloroso” y difícil de gestionar, ya no es una opción.
Por eso, desde hace años que el sector del Desarrollo Web cuenta con diferentes frameworks y herramientas de CSS para simplificar este proceso y mejorar la productividad.
Una de estas herramientas es ACSS (Atomized CSS), una solución de Atomic CSS para frameworks basada en componentes, que ya existe hace algunos años pero que vale la pena echar un vistazo.
ACSS te permite “estilizar directamente en tus componentes, evitando el dolor de cabeza y la pesadilla de gestionar hojas de estilo”. En este artículo veremos algunas de sus características.
¿Qué son los componentes?
Los componentes web son un conjunto de diferentes tecnologías que te permiten crear elementos personalizados reutilizables, - con funcionalidad encapsulada del resto de tu código,- y utilizarlos en tus aplicaciones web.
¿Qué es Atomic CSS?
Atomic CSS (CSS atómico) es un enfoque de la arquitectura de CSS que favorece las clases pequeñas de un solo propósito con nombres basados en la función visual.
¿Cómo funciona Atomic CSS?
Como hemos dicho anteriormente, Atomic CSS te ofrece unidades de estilo de un solo propósito, pero, envés de basarse en estilos en línea, se aplica a través de clases. La ventaja de esta funcionalidad es poder utilizar media queries, estilos contextuales, o pseudo-clases, además de permitir anulaciones más fáciles, nombre de clases altamente reutilizables y comprimibles.
ACSS lo hace posible, también, gracias a una herramienta llamada Atomizer que te permite generar de forma dinámica una hoja de estilo atómica a partir de clases que se están usando, o predecir estilos en la configuración.
Algunas características de ACSS
- Colores mediante valores hexadecimales.
- Variables útiles para tematizar y también para compartir valores en común entre las declaraciones de estilo.
- Selectores contextuales que te permiten estilizar elementos en función de sus antepasados o hermanos.
- Pseudo-classes para crear estilos que se basen en pseudoclases
- Grids. ACSS tiene soporte para float, flexbox, bloque en línea, o tablas y tu estilo de medición preferido: porcentaje, em, rem, px, etc...
- Diseño web responsivo (RWD)
- Tamaños de fuentes responsivos
- Helpers. Clases auxiliares para estilos comunes: clearfix, configuración de bordes, truncar texto con puntos suspensivos, ocultar texto visualmente, etc...
Algunos ejemplos de aplicación de ACSS
Te dejo algunos ejemplos de cómo se ve el código con ACSS, que puedes encontrar en el sitio web oficial de ACSS:
Colores
<div class="Bgc(#0280ae.5) C(#fff) ">
Créeme: soy un texto de color blanco en fondo azul.
</div>
Variables
// Objeto de configuración
'custom': {
'brandColor': '#0280ae',
'columnWidth': '20px'
}
<div class="Pos(a) Bgc(brandColor) W(columnWidth) H(90px)"></div>
<div class="C(brandColor) BdB Bdc(brandColor) Mstart(columnWidth) P(10px)">
¡Hola Mundo!
</div>
Conclusión
ACSS es una herramienta que te permite tener “CSS atómico con esteroides”. Si quieres saber más, en el sitio web oficial de ACSS puedes tener acceso a más información y referencias de cómo utilizar Atomizer y otras funcionalidades.
¿Crees que ACSS es realmente útil para tus proyectos? ¡Coméntalo abajo!
Fuente:
