@myskypesla

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

Проекты на 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,
  },
},


Интересно ваше мнение
  • Вопрос задан
  • 140 просмотров
Пригласить эксперта
Ответы на вопрос 2
Первый вариант намного проще для поддержки в больших проектах, с большим количеством компонентов.
Ответ написан
rockon404
@rockon404 Куратор тега React
Frontend Developer
Что больше нравится, то и используйте.
css-in-js используют, именно, из-за его удобства. Никаких проблем с поддержкой нет.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы