Подход CSS-in-JS

Библиотеки для написания CSS в JavaScript-коде.

Рейтинги

Экспорт
УдовлетворённостьУ
ЗаинтересованностьЗ
ИспользованиеИ
УзнаваемостьУ

Процент удовлетворённости, заинтересованности, использования, узнаваемости.

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%

Не учитываются технологии с узнаваемостью менее 10%. Каждое соотношение определяется следующим образом:

  • Удовлетворённость: сравнение ответов Буду использовать снова и Больше не буду использовать.
  • Заинтересованность: сравнение ответов Хочу изучить и Не интересно.
  • Использование: сравнение ответов Буду использовать снова/Больше не буду использовать с общим количеством.
  • Узнаваемость: разница между количеством ответов за узнаваемость и количеством ответов за вариант ответа Впервые слышу.

Опыт работы

Экспорт
Проценты%
КоличествоΣ

Анализ ответов по исследуемым технологиям в сравнении с предыдущим годом.

Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу
2019202020192020

Styled Components

2019202020192020

JSS

2019202020192020

Styled JSX

2019202020192020

Radium

2019202020192020

Emotion

2019202020192020

CSS Modules

Не учитываются технологии, данные по которым есть только за один год.

Сравнение положительных и негативных ответов

Экспорт

На следующей диаграмме разделены положительные («Хочу изучить», «Буду использовать снова») и негативные («Не интересно», «Больше не буду использовать») ответы справа и слева, соответственно, относительно центральной оси.

Ширина столбца представляет собой количество респондентов, знакомых с рассматриваемой технологией.

Не буду больше использоватьНе интересноБуду ещё использоватьИнтересноУзнаваемость60%40%20%0%20%40%60%80%60%40%20%0%20%40%60%80%CSS ModulesStyled ComponentsStyled SystemEmotionStyled JSXLinariaStitchesJSSAstroturfStyletronFelaRadium

Styled Components
Процент заполнения: 80.5% (9255)
Процент заполнения: 80.5% (9255)

Экспорт
Проценты%
КоличествоΣ

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%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

JSS
Процент заполнения: 80.6% (9267)
Процент заполнения: 80.6% (9267)

Экспорт
Проценты%
КоличествоΣ

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%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Styled JSX
Процент заполнения: 80.8% (9282)
Процент заполнения: 80.8% (9282)

Экспорт
Проценты%
КоличествоΣ

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%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Radium
Процент заполнения: 80.6% (9264)
Процент заполнения: 80.6% (9264)

Экспорт
Проценты%
КоличествоΣ

2019

11.3% 11.3% 82.2% 82.2%

2020

11.9% 11.9% 81.3% 81.3%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Emotion
Процент заполнения: 80.8% (9281)
Процент заполнения: 80.8% (9281)

Экспорт
Проценты%
КоличествоΣ

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%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

CSS Modules
Процент заполнения: 80.9% (9293)
Процент заполнения: 80.9% (9293)

Экспорт
Проценты%
КоличествоΣ

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%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Styled System
Процент заполнения: 80.6% (9268)
Процент заполнения: 80.6% (9268)

Экспорт
Проценты%
КоличествоΣ

2020

8% 8% 78.5% 78.5%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу
Мы попросили участников CSS-сообщества поделиться своим ”выбором года”.

Мой выбор в 2020 году: Fela

Fela — удивительный инструмент. Он довольно мощный, достаточно простой в использовании и при этом очень эффективный.

Мы попросили участников CSS-сообщества поделиться своим ”выбором года”.

Hugo “Kitty” Giraudel

Небинарный сторонник доступности и социокультурного многообразия

Stitches
Процент заполнения: 80.7% (9270)
Процент заполнения: 80.7% (9270)

Экспорт
Проценты%
КоличествоΣ

2020

91.9% 91.9%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Styletron
Процент заполнения: 80.8% (9281)
Процент заполнения: 80.8% (9281)

Экспорт
Проценты%
КоличествоΣ

2020

93.2% 93.2%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Fela
Процент заполнения: 80.8% (9284)
Процент заполнения: 80.8% (9284)

Экспорт
Проценты%
КоличествоΣ

2020

94.2% 94.2%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Linaria
Процент заполнения: 80.7% (9277)
Процент заполнения: 80.7% (9277)

Экспорт
Проценты%
КоличествоΣ

2020

92.2% 92.2%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Astroturf
Процент заполнения: 80.7% (9271)
Процент заполнения: 80.7% (9271)

Экспорт
Проценты%
КоличествоΣ

2020

93.7% 93.7%
Не буду больше использовать
Не интересно
Буду ещё использовать
Интересно
Впервые слышу

Другие инструменты
Процент заполнения: 0.7% (84)
Процент заполнения: 0.7% (84)

Экспорт
Проценты%
КоличествоΣ

Другие инструменты в этой категории (ответы в свободной форме).

0.05.01015200.05.0101520Количество пользователейCSS-in-JSCSS-in-JSVue.jsVue.jsTheme UITheme UI121314

Общий показатель удовлетворённости

Экспорт
Проценты%
КоличествоΣ

По шкале от одного (очень недоволен) до пяти (очень доволен), насколько довольны разработчики текущим состоянием этой категории?

0%10%20%30%40%50%Процент пользователейОчень недоволенНе доволенЗатрудняюсь ответитьДоволенОчень доволенУдовлетворённость0%10%20%30%40%50%4.7%4.7%10%10%50.5%50.5%26.7%26.7%8%8%

Рекомендуемые ресурсы

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.
Спасибо нашим партнёрам за поддержку! Подробнее.
« Назад: CSS-методологииВперёд: Другие инструменты »
Визуализация данных сделана с помощью Nivo. Сайт размещён на Netlify.
Есть вопрос? Нашли ошибку? Создайте ишью. Заходите к нам в Discord-чат.
Нажмите option/alt, чтобы активировать режим переводчика.