Descripción general

En esta sección, analizaremos los conceptos básicos de EffCSS, lo compararemos con herramientas similares y determinaremos cuándo usarlo.

¿Otro CSS en JS?

En resumen, sí. EffCSS es una biblioteca CSS en JS que busca ser una herramienta sencilla para crear estilos complejos y predecibles. La biblioteca se basa en varias abstracciones:

• El StyleSheet Maker es una función de JS que recibe un objeto con utilidades como argumento y debe devolver un objeto o cadena con estilos; las utilidades contienen funciones útiles que generan pseudoselectores, reglas @, selectores BEM, etc.
• El Style Provider es un HTMLScriptElement personalizado en el lado del cliente que se puede emular en el lado del servidor para procesar y administrar los creadores de hojas de estilo en cualquier lugar.

También utiliza API comunes de navegadores como

• CSSStyleSheet API,
• Web Components,
• Document adoptedStyleSheets property.

Por lo tanto, EffCSS no requiere dependencias externas. Funciona de la misma manera en todos los navegadores modernos y con cualquier framework.

Principales funciones integradas

• Generación de CSS en el cliente: puedes usar hojas de estilo dinámicamente en el cliente mediante el Proveedor de estilos.
• Generación de CSS en el servidor: el Proveedor de estilos puede serializar su estado en una cadena HTML que se puede usar para SSR/SSG.
• Activación/desactivación de CSS: cualquier hoja de estilo generada se puede activar/desactivar mediante el método on/off del Proveedor de estilos.
• Soporte para temas: los temas se pueden crear, actualizar/eliminar usando el objeto controlador de temas, disponible en la propiedad theme del objeto Proveedor de estilos.
• Hojas de estilo con TypeScript: si el creador de hojas de estilo usa TypeScript, el Proveedor de estilos puede resolver selectores con autocompletado.
• Selectores aislados y minificados: cada creador de hojas de estilo puede usar la utilidad select, que devuelve selectores con un prefijo único; además, se pueden minificar mediante el atributo min del Proveedor de estilos.

Comparación

Sass / Less

Los preprocesadores proporcionan su propia sintaxis y restricciones asociadas. EffCSS permite usar JavaScript y TypeScript modernos como se desee.

Tailwind

Tailwind gestiona utilidades y requiere la configuración del editor para el resaltado de sintaxis y el autocompletado. EffCSS gestiona hojas de estilo y permite el autocompletado de selectores mediante genéricos de TypeScript.

Emotion

@emotion/css tiene dependencias y, en muchos casos, requiere otros paquetes del ecosistema (como @emotion/react o @emotion/styled). EffCSS es independiente y no tiene dependencias; funciona igual en todos los casos.

Styled Components

Styled Components está diseñado para dar estilo a los componentes de React. EffCSS es independiente del framework.

Linaria

Linaria es una biblioteca de tiempo de ejecución cero. EffCSS crea CSS en cualquier lugar.

¿Cuándo usarla?

Bueno, elegir una librería es cuestión de gustos. De hecho, puede haber varias razones:

Quieres

• usar una herramienta independiente del framework 😍,
• usar estilos varias veces con sugerencias de TypeScript 😎,
• usar estilos en el servidor sin configuraciones adicionales 😃.

No quieres

• instalar plugins de compilación adicionales en un proyecto 😦,
• añadir extensiones especiales a tu editor 😨,
• aprender nueva sintaxis 😠.

¿Te gustó al menos una razón? ¡Entonces empecemos!