Breaking

Post Top Ad

Your Ad Spot

martes, 8 de octubre de 2019

9 CSS en las bibliotecas JS que debes saber en 2019

"Componentes de estilo" es uno de los debates más interesantes en la comunidad últimamente. Los diferentes conceptos van desde CSS en línea a Sass, Less y mucho más.
Un concepto particularmente interesante es usar JS en CSS para abstraer CSS al nivel de componente en sí, usando JavaScript para describir estilos de una manera declarativa y sostenible. Con el lanzamiento del popular proyecto de componentes con estilo de Max Stoiber , este concepto es más común hoy que nunca.
Entonces, para ayudarlo a sumergirse y probarlo usted mismo, hemos enumerado algunas bibliotecas útiles para usar CSS en JavaScript para diseñar sus componentes.
Consejo : Use Bit para compartir y reutilizar sus componentes entre aplicaciones. Descubre y juega con componentes, y úsalos para crear aplicaciones más rápido. Darle una oportunidad.
Reaccione los hilanderos con Bit: elija, juegue, use

Empecemos. Puede leer esta discusión recomendada para ayudarlo a tomar una buena decisión, y aquí hay una comparación muy interesante de proyectos . ¡Buena suerte!

1. Componentes diseñados

Una idea nacida en un bar de whisky australiano se convirtió en un proyecto de 18K estrellas, ampliamente adoptado en la comunidad. Los componentes con estilo facilitan el uso de CSS en los componentes de React, al definir componentes con estilo con estilos encapsulados sin clases de CSS como una capa mediadora.
Los componentes con estilo se crean definiendo componentes utilizando la notación literal de plantilla ES6. Las propiedades CSS se pueden agregar al componente según sea necesario, tal como lo haría normalmente con CSS. Cuando se analiza el JS, los componentes con estilo generarán nombres de clase únicos e inyectarán el CSS en el DOM. Puedes aprender más en esta gran charla de Max Stoiber .
Consejo : los componentes con estilo también se pueden combinar con Bit , para compartirlos entre aplicaciones y desarrollarlos en un patio visual . Echar un vistazo.
  • También echa un vistazo: Stylable por Wix-Eng, que todavía está en desarrollo.

2. Radio

Con 6.5K estrellas y creado por FormidableLabs, Radium se define como "Una cadena de herramientas para el estilo de componentes React". Es un conjunto de herramientas para administrar estilos en línea con React sin CSS. Radium ofrece una interfaz estándar y abstracciones para lidiar con funciones CSS que los estilos en línea no se adaptan fácilmente
Radium le permite agrupar estilos con sus componentes React, acoplando javascript, html y estilo juntos. También proporciona representación basada en accesorios, lo que le permite diseñar sus componentes según el estado de su aplicación.

3. Afrodita

Afrodita es una biblioteca CSS-in-JS independiente del marco con soporte para la representación del lado del servidor, el prefijo del navegador y la generación mínima de CSS. Afrodita transforma todo en clases y usa el classatributo.
En las estrellas 4K, este proyecto funciona con React o sin él y proporciona características como la inyección de estilo en el Dom, estilos de prefijos automáticos y más, todo en un tamaño relativamente pequeño de 20k y un puñado de dependencias. Aquí hay un resumen útil de Afrodita vs.Radio.

4. emoción

En 4.2K estrellas, Emotion es una biblioteca CSS-in-JS flexible y de alto rendimiento que le permite diseñar aplicaciones con cadenas o estilos de objetos. Tiene una composición predecible para evitar problemas de especificidad con CSS. Basado en elglamour biblioteca y su filosofía la idea es retener el rendimiento del tiempo de ejecuciónal escribir CSS analizando estilos con babel y PostCSS. El tiempo de ejecución principal es 2.3kb y con soporte React, 4kb. La emoción no se limita a Reaccionar.

5. glamoroso

Nota : ¡el proyecto ya no se mantiene activamente! todavía genial :)
Con 3.6K estrellas, Glamorous de PayPal está orientado a construir "CSS mantenible con React" inspirado en componentes con estilo y jsxtyle. Kent C. Dodds define el proyecto como "Reaccionar el estilo del componente resuelto con una API elegante ( inspirada ), un tamaño reducido (<5kb comprimido) y un gran rendimiento (vía glamor)". Tiene una API muy similar a los componentes con estilo y utiliza herramientas similares debajo del capó.

6. Glamour

Inspirado en las ideas de esta gran charla , Glamour es pequeño y efectivo. Le permite escribir CSS en línea en sus componentes usando la misma sintaxis de Object CSS que React admite para el styleaccesorio. Es rápido y eficiente, independiente del marco, renderizado estático / servidor y agrega prefijos de proveedor / valores de respaldo. Aquí hay una breve introducción de documentos API , una comparación de técnicas CSS en Glamour y un tutorial útil de Glamour con Gatsby.
  • También echa un vistazo: Glam (todavía en el trabajo)

7. Fela

<FelaComponent 
  style = {{ 
    backgroundColor: 'blue', 
    color: 'red' 
  }} 
  render = {({className, theme}) => ( 
    <div className = {className}> Soy rojo sobre azul. </div> 
  )} 
/>
Fela es un proyecto creado para el estilo dirigido por el estado en JavaScript, que enfatiza 3 cosas: hacer que el estilo sea dinámico de forma predeterminada, traer framework-agnóstico Bindings for React ) y ser eficiente. Es dinámico por diseño y representa estilos dependiendo del estado de su aplicación. Genera CSS atómico y admite todas las características comunes de CSS, como consultas de medios, pseudo clases, fotogramas clave y fuentes. Se puede usar con cualquier biblioteca de vistas, incluida React native. Puede leer más sobre las características de V6 aquí .

8. Styletron

Gracias a esta publicación de código zanahoria
Con 2500 estrellas, Styletron es un "juego de herramientas para el diseño orientado a componentes". Styletron admite componentes de estilo de elemento único sin estado como primitivo de estilo base con interfaces prop para un estilo condicional / dinámico, y una composición de estilos a través de objetos JavaScript (escritos) sin herramientas adicionales (por ejemplo, cargadores de paquetes web, complementos de Babel, etc.). Tampoco es obstinado sobre la forma de los objetos de estilo. Puede obtener más información en este interesante hilo de HN .

9. JSS

https://codesandbox.io/s/z21lpmvv33
JSS es una abstracción sobre CSS que usa JavaScript para describir estilos de una manera declarativa y sostenible. Es un compilador JS a CSS de alto rendimiento que funciona en tiempo de ejecución y del lado del servidor. Esta biblioteca principal es de bajo nivel y agnóstica de marco, y tiene aproximadamente 6 KB (minificada y comprimida). También se puede extender a través de complementos API. Aquí hay un buen tutorial para convertir SCSS (Sass). Consulte también React-JSS , una integración de JSS para React.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas