CSS-in-JS

Librerías que nos ayudan a escribir CSS dentro del código JavaScript.

Clasificaciones

Exportar
SatisfacciónS
InterésI
UsoU
ConcienciaC

Clasificación de la conciencia, el interés y el ratio de satisfacción.

2019202020192020Styled ComponentsJSSStyled JSXRadiumEmotionCSS ModulesStyled ComponentsJSSStyled JSXRadiumEmotionCSS ModulesStyled SystemStitchesStyletronFelaLinariaAstroturf85%82%59%58%67%68%27%18%87%80%86%87%80%69%41%40%64%57%

No se incluyen tecnologías con menos del 10% de conocimiento. Cada proporción se define de la siguiente manera:

  • Satisfacción: usaría de nuevo / (usaría de nuevo + no usaría de nuevo)
  • Interés: quiero aprender / (quiero aprender + no interesado)
  • Uso: (usaría de nuevo + no usaría de nuevo) / total
  • Conocimiento: (total - nunca he oído) / total

Experiencia en el Tiempo

Exportar
Porcentajes%
CuentaΣ

Opiniones sobre la tecnologías encuestadas, en el tiempo.

No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído
2019202020192020

Styled Components

2019202020192020

JSS

2019202020192020

Styled JSX

2019202020192020

Radium

2019202020192020

Emotion

2019202020192020

CSS Modules

No se incluyen las tecnologías con solo un año de datos.

División Positiva/Negativa

Exportar

Este gráfico se divide en experiencias positivas ("quiero aprender", "volvería a usar") vs. negativas ("no me interesa", "no volvería a usar") en ambos lados de un eje central.

El grosor de la barra representa el número de encuestados que conocen una tecnología.

No lo usaríaNo estoy interesadoLo volvería a usarInteresadoConciencia60%40%20%0%20%40%60%80%60%40%20%0%20%40%60%80%CSS ModulesStyled ComponentsStyled SystemEmotionStyled JSXLinariaStitchesJSSAstroturfStyletronFelaRadium

Styled Components
Porcentaje completado: 80.5% (9255)
Porcentaje completado: 80.5% (9255)

Exportar
Porcentajes%
CuentaΣ

2019

12.7% 12.7% 33.7% 33.7% 26.7% 26.7% 21% 21%

2020

9.3% 9.3% 13.6% 13.6% 42.3% 42.3% 20.5% 20.5% 14.3% 14.3%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

JSS
Porcentaje completado: 80.6% (9267)
Porcentaje completado: 80.6% (9267)

Exportar
Porcentajes%
CuentaΣ

2019

15% 15% 9.1% 9.1% 69.1% 69.1%

2020

20.8% 20.8% 8.3% 8.3% 12.2% 12.2% 52.6% 52.6%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Styled JSX
Porcentaje completado: 80.8% (9282)
Porcentaje completado: 80.8% (9282)

Exportar
Porcentajes%
CuentaΣ

2019

17% 17% 9.2% 9.2% 13.6% 13.6% 55.7% 55.7%

2020

8.4% 8.4% 21.2% 21.2% 18% 18% 14.6% 14.6% 37.8% 37.8%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Radium
Porcentaje completado: 80.6% (9264)
Porcentaje completado: 80.6% (9264)

Exportar
Porcentajes%
CuentaΣ

2019

11.3% 11.3% 82.2% 82.2%

2020

11.9% 11.9% 81.3% 81.3%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Emotion
Porcentaje completado: 80.8% (9281)
Porcentaje completado: 80.8% (9281)

Exportar
Porcentajes%
CuentaΣ

2019

8.5% 8.5% 11% 11% 72.9% 72.9%

2020

12.7% 12.7% 12.8% 12.8% 13.5% 13.5% 57.6% 57.6%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

CSS Modules
Porcentaje completado: 80.9% (9293)
Porcentaje completado: 80.9% (9293)

Exportar
Porcentajes%
CuentaΣ

2019

7.8% 7.8% 21.3% 21.3% 30.6% 30.6% 36.7% 36.7%

2020

9.1% 9.1% 31.4% 31.4% 27.4% 27.4% 27.4% 27.4%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Styled System
Porcentaje completado: 80.6% (9268)
Porcentaje completado: 80.6% (9268)

Exportar
Porcentajes%
CuentaΣ

2020

8% 8% 78.5% 78.5%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído
Hemos pedido a la comunidad de CSS que compartan su “elección del año”

Mi selección para 2020: Fela

Fela es una increíble pieza de código. Es muy potente, relativamente fácil de usar y con un alto rendimiento.

Hemos pedido a la comunidad de CSS que compartan su “elección del año”

Hugo “Kitty” Giraudel

Non-binary accessibility & diversity advocate

Stitches
Porcentaje completado: 80.7% (9270)
Porcentaje completado: 80.7% (9270)

Exportar
Porcentajes%
CuentaΣ

2020

91.9% 91.9%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Styletron
Porcentaje completado: 80.8% (9281)
Porcentaje completado: 80.8% (9281)

Exportar
Porcentajes%
CuentaΣ

2020

93.2% 93.2%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Fela
Porcentaje completado: 80.8% (9284)
Porcentaje completado: 80.8% (9284)

Exportar
Porcentajes%
CuentaΣ

2020

94.2% 94.2%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Linaria
Porcentaje completado: 80.7% (9277)
Porcentaje completado: 80.7% (9277)

Exportar
Porcentajes%
CuentaΣ

2020

92.2% 92.2%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Astroturf
Porcentaje completado: 80.7% (9271)
Porcentaje completado: 80.7% (9271)

Exportar
Porcentajes%
CuentaΣ

2020

93.7% 93.7%
No lo usaría
No estoy interesado
Lo volvería a usar
Interesado
Nunca lo he oído

Otras Herramientas
Porcentaje completado: 0.7% (84)
Porcentaje completado: 0.7% (84)

Exportar
Porcentajes%
CuentaΣ

Otras herramientas en esta categoría (respuestas libres).

0.05.01015200.05.0101520Número de UsuariosCSS-in-JSCSS-in-JSVue.jsVue.jsTheme UITheme UI121314

Satisfacción General

Exportar
Porcentajes%
CuentaΣ

En una escala del uno (muy descontento) al cinco (muy feliz), ¿cómo de contentos están los desarrolladores con el estado general de esta categoría?

0%10%20%30%40%50%Porcentaje de UsuariosMuy DescontentoDescontentoNeutroContentoMuy ContentoFelicidad0%10%20%30%40%50%4.7%4.7%10%10%50.5%50.5%26.7%26.7%8%8%

Recursos Recomendados

Intermediate React, v2

You’ll learn hooks in-depth, CSS-in-JS with emotion, increase performance with code splitting and server-side rendering, and more.
¡Gracias a nuestros socios por apoyarnos! Aprender más.
« Anterior: Metodologías CSSSiguiente: Otras herramientas »
Gráficas construidas con Nivo. Alojado por Netlify.
¿Preguntas? ¿Has encontrado un fallo? Contacta con nosotros. Únete a nosotros en Discord.
Presiona option/alt para habilitar el modo traductor.