2

In the context of a react web app, what are features available in css/scss/sass which one cannot get from using pure javascript objects?

So far I could only come up with these features:

  1. Factoring out styles so they don't mix with the logic. This can still be achieved by having a javascript file dedicated to styling and importing it.
  2. Style composition. Can still be achieved using the spread (...) operator. Safety can be achieved using immutable objects.
  3. Using selectors to apply design. This is just a poor man's pointer imo. If you can apply the styling directly using variables, you can achieve the same outcome without any extra boilerplate, and less syntax.

Asking to understand which way to go in a given project.

EDIT: I've highlighted the question, this is not a subjective discussion, but a request for a features list that is found in these frameworks and does not exist in pure js.

Uri
  • 25,622
  • 10
  • 45
  • 72
  • Does this answer your question? [Styled-Components vs SASS (SCSS) or LESS](https://stackoverflow.com/questions/46747038/styled-components-vs-sass-scss-or-less) – Eld0w Dec 16 '19 at 13:50
  • 2
    Using javascript variables will make your style inline in the component, which will cause more bundle size in the end I think. – Loi Nguyen Huynh Dec 16 '19 at 13:52
  • @Eld0w I'm not talking about styled-components, but about pure javascript. – Uri Dec 16 '19 at 14:17
  • @HuỳnhLợiNguyễn surprising. isn't that an easy optimization to make by react? – Uri Dec 16 '19 at 14:17
  • 1
    if you write it in scss/sass , it would eventually be made into css file , if you opt for JS to style your dom elements the performance cost would be catastrophically high. – Summy Dec 16 '19 at 14:19
  • @Uri I think it's possible. But is easy, isn't it? I don't think anything is easy, they have a lot of other things to do. Btw, an approach that I saw some people use many recently is using [@material-ui/styles](https://material-ui.com/styles/basics/), it's `css-in-js`, but compiles to CSS instead of inline style, its syntax is also clean by Hooks. Give it a look, I think this one is very promising as of today. – Loi Nguyen Huynh Dec 16 '19 at 14:34
  • About "css vs js-variables", I think it's a lot about preference, some people **just prefer** writing css in a separate css/scss file. Or might be, it's easier if someone wants to copy their style/components to a Vue (or other kinds of) project. – Loi Nguyen Huynh Dec 16 '19 at 14:42

0 Answers0