Какой подход к CSS правильный?

Question

[myskypesla]

Проекты на React + MobX.

Какой подход правильнее?

1. SCSS
Использовать папку scss со следующей структурой:

--scss
----vendors
------fullpage.scss
----common
------variables.scss
------mixins.scss
------typography.scss
------layout.scss
Все общие конфиги, плагины в одном папке assets/scss, а все файлы, которые относятся к компонентам, находятся в папках компонента, допустим делаем компонент и рядом с Button.js кладём Button.scss

2. CSS in JS
Данный подход на мой взгляд сильно переусложняет написание приложения и дальнейшую поддержку другими разработчиками.

К примеру конфиг для отступов выглядит так:

SPACING: {
  [sizes.s]: {
    [size.xs]: 1,
    [size.s]: 2,
    [size.m]: 3,
    [size.l]: 4,
    [size.xl]: 5,
  },
  [sizes.m]: {
    [size.xs]: 2,
    [size.s]: 4,
    [size.m]: 6,
    [size.l]: 8,
    [size.xl]: 10,
  },
  [sizes.l]: {
    [size.xs]: 0,
    [size.s]: 4,
    [size.m]: 6,
    [size.l]: 8,
    [size.xl]: 12,
  },
},

Интересно ваше мнение

Answer 1

[Даниил Маслов]

Первый вариант намного проще для поддержки в больших проектах, с большим количеством компонентов.

Comments

[myskypesla]

Спасибо

Answer 2

[Антон Спирин]

Что больше нравится, то и используйте.
css-in-js используют, именно, из-за его удобства. Никаких проблем с поддержкой нет.

Comments

[myskypesla]

Спасибо