В чем разница между css modules и styled-components?

Question

[colorkid]

В чем разница между css modules и styled-components? И то и то инкапсулиуют стили внутри компонентов, ну да немного по разному, но какое принципиальное различие у этих подходов?

Answer 1

[TheSnegok]

css module работают только для элементов компонента в который импортируются, а styled-components для всего дерева компонентов.
Это коротко, больше прочесть тут:тык

Comments

[Егор Живагин]

Возможно я не очень понял, но в css-modules можно юзать точно такие же вложенные селекторы и :global(.globalClassName)

[TheSnegok]

Егор Живагин, можно, если задать класс как строку, а если встроить как объект тогда это и будет модульность)
После компиляции из модульного css выходят такие же классы только с добавлением цифр в конце, которые относятся только к отдельным компонентам, и могут быть одинаковые названия стилей, но цифры разные)

[Егор Живагин]

TheSnegok, это я понимаю) В styled components, кажется, для вложенных селекторов нужно либо писать класс строкой, либо строить селектор на тэгах ( вот эти прекрасные селекторы: div div > div + div > div). Как и в css modules. Получается, разницы нет)

Для автора вопроса, на всякий случай: классы, которые из модульного css выходят после сборки могут быть разного вида, можно хоть просто хэш оставить, хоть префиксы добавлять, ... Это всё настраивается в лоадере, который отвечает за css

[profesor08]

Егор Живагин,

В styled components, кажется, для вложенных селекторов нужно либо писать класс строкой, либо строить селектор на тэгах ( вот эти прекрасные селекторы

const Icon = styled.div``;

const UserIcon = styled(Icon).attrs({
  width: 20,
  height: 30,
})``;

const Block = styled.div`
  ${Icon} {
    color: green;
  }

  ${UserIcon} {
    color: red;
  }
`;

[TheSnegok]

Егор Живагин, Ну если смотреть в только в этом направлении то да)

[Егор Живагин]

profesor08, забавно, спасибо

Answer 2

[Егор Живагин]

Про styled-components основано на том, что я читал об этом подходе, опыта с ним нет

Корневое отличие в том, что styled components - это css-in-js, стили пишутся шаблонной строкой, вставляются в атрибут/тэг style . Препроцессоры связывать с этим уже посложнее (вероятно, в этом нет потребности)

css-modules проще, можно использовать препроцессоры, собирать в бандлы, чанки, да хоть в тот же тэг style

Это если очень коротко) Почитайте о css-in-js, всё должно быть уже написано

Answer 3

[profesor08]

styled-components если хочешь, чтоб все было компактно, аккуратно не раскидано по проекту, да и вообще если не хочешь париться.

css modules если хочешь писать стили в отдельных файликах, а потом упарываться по их комбинированию, чтоб переключать стили для разных состояний.