Как лучше писать стили CSS Modules или Styled Components?

Question

[qfrontend]

Приветствую)
Как лучше писать стили CSS Modules или Styled Components? Что на данный момент актуальнее? Как вы пишете стили?

Answer 1

[profesor08]

Как хочешь. Я пишу просто в файле и подключаю его. Модульность стилей вещь ситуативная и не всегда с ней удобно работать.

import "./style.scss";

Answer 2

[grinat]

То и то отвратительно, благодаря обычному css реально можно просто и быстро стилизовать страницы. А это все калька с десктопных приложений, а их стилизация всегда была кошмаром, попытка добавить какое-нить скругление превращалось в борьбу с кучей xml'ек. Теперь же когда десктоп почти умер, поскольку все массово переходят в вэб, народ пытается перетащить худшие вещи оттуда.

Comments

[Данакт Фрост]

Что, если я скажу вам, что между синтаксисом «обычного css», css modules и styled components нет никакой разницы? :)

[grinat]

Данакт Фрост, при чем тут синтаксис? я про реинкарнацию interface builder'ов

[Spaceoddity]

Плюсую. Как же задолбало при отладке откапывать нужные правила через веб-инспектор, а потом поиском по исходникам (которые ещё всякие вебпаки тяп-ляп склеивают) всё это править (а ещё частенько бывают дублирующие записи). В "обычном css" веб-инспектор сразу тебе даст ссылку на нужный стилевой файл и на строку кода в нём.

[Иван В]

Вы вполне правы, если вы говорите о маленьком приложении с минимумом состояний, на 1-2 экрана.

Но не правы если речь идет о большом веб-приложении.
Используя единый файл CSS (или даже несколько) вы получите несколько проблем:
1. Многие тысячи сторок CSS кода в одном файле
2. Из первого вытекает проблема нейминга (каждый раз выдумывать имена селекторов чтобы они не повторялись)
3. Из первого также вытекает проблемы с повторным использованием кода (не всегда очевидно где начинаются \ заканчиваются стили определенного компонента )
4. Если CSS файлов несколько, селектор прописанный в одном файле, будет перебивать такой-же селектор в другом файле, который мог написать, например, ваш коллега или вы сами неделю назад.

React - это компоненты. Компоненты должны быть максимально логически разделены, в том числе и источники их внешнего вида.
Работая с React на большом проекте, предполагается что вы будете многократно переиспользовать отдельные компоненты. Когда у этих компонентов стили определены через CSS Modules или Styled Components, можно решить описанные выше проблемы.
- всегда видите 10-100 строк CSS кода которые относятся Только к определенному компоненту. Быстро читаешь, быстро фиксишь.
- всегда уникальные селекторы
- легко переносить компоненты из проекта на проект

[grinat]

Иван В, раньше все эти компоненты назывались виджетами, также они называются и сейчас в ios/adnroid. Единственная причина появления этого стайлед говна, это нужен был способ сконвертировать стили в xml'ки для android и ios. Ничего из того что ты написал они тебе не дадут. Глядя на п 1-4 могут сказать точно что этот большой проект скатится в говно независимо от того есть стайлед или нет стайлед, и стили там будут самой незначительной из проблем, потому что все что ты указал говорит от отсутствии коде стайла и ревью.

[Иван В]

grinat, если не "стайлед говно", то какие Ваши варианты?

[grinat]

Иван В, обычный css и его диалекты saas/less(но без волшебства а-ля микшины, наследование и т.п.). Касаемо инкапсуляция и т.п., то есть куча методик, тот же бэм например.

Answer 3

[mr jeery]

Мне нравится использовать CSS Modules. Можно в каждом компоненту определять стили с одним и тем же названием, например "container", а не "appbar-container", "appbar2-container" итд и не париться, что он встречается в другом компоненте.

Answer 4

[itsjustmypage]

Пока ты тут спрашиваешь, они оба устареют, придётся переписывать.

Answer 5

[taliano]

CSS-in-JS на хайпе, а уж конкретно styled-components, glamorous или aphrodite это уже вкусовщина

Answer 6

[SerzN1]

что дает одно и другое?
CSSinJS - удобное темирование, инкапсуляцию
CSS Modules - инкапсуляцию

из минусов - подход CSSinJS своеобразный сомнительный код

собственно делаем выводы - без разницы если активно не пользоваться темированием

Answer 7

[Klein Maximus]

На текущем проекте у нас CSS Modules, на предыдущем был styled-components. И то, и то можно использовать. Это вопрос личных предпочтений. Но, пожалуй, styled-components - это более "React way", нежели CSS Modules.