5 ms·

In my opinion this is a workaround for a language flaw in the React concept. Look at this beauty for comparison: https://vuejs.org/v2/guide/single-file-compone

In my opinion this is a workaround for a language flaw in the React concept. Look at this beauty for comparison: https://vuejs.org/v2/guide/single-file-components.html https://vuejs.org/v2/guide/single-file-components.html

dsego 8y ago
Yup, that's what you can have with precompiled templates. Riot.js introduced the same concept of scoped css years ago, I wish it was more popular. On the other hand it goes against the "it's just javascript" concept of React.
akuji1993 8y ago
Hm, I don't share your opinion on this matter, to be honest. You can easily avoid this in both Angular (which does it out of the box) and React by including CSS Modules (https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules) which, if you use create-react-app to build your projects, is a 5 minute change to your architecture. So there really is no reason to write that down as a con for React.
- scottrepreneur 8y ago
  Works out of the box for the most recent version of CRA, as well.
- dictum 8y ago
  You're right, but community support around a certain pattern often makes it the de-facto practice, so defaults matter even for a non-opinionated library (where "defaults" are essentially what tutorials and thought leaders point to)
  - cynicalreason 8y ago
    I always thought css-modules is the de-facto practice
    - therealmarv 8y ago
      I know a ton of companies who did not even heard the memo about it.
- preommr 8y ago
  I have so many small components that I would loathe to have a separate stylesheet. Yes, it's a small thing to just switch tabs, but this is a small problem. And these small problems add up and can be a huge pain. I really really like the SFCs in vue and compare it to a bit of butter on toast. It might be a small thing, but it seems like it makes a big difference.
  - antihero 8y ago
    So you can just use styled-components as in the OP
- therealmarv 8y ago
  You can avoid many things by forcing yourself to use this and this practice. In my experience not all developers out there know what is "good" and what is "bad" practice and there are certainly many React developers out there who never heard about CSS modules. Let's say better it's not a flaw in React but a trap which can cause huge maintenance headache in my opinion.
haukur 8y ago
What you linked is "CSS-in-JS" (in the sense that the library/framework you use transforms the output for you, for convenience, i.e., you're not writing BEM or whatever - same as in the original article). Vue scopes the styles by adding a data attribute. https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-cs... Inspect the result here: https://codesandbox.io/s/3v0pjzoy7q https://codesandbox.io/s/3v0pjzoy7q
dmitriid 8y ago
> a language flaw in the React concept. What language are you talking about? React is Javascript > Look at this beauty for comparison Meanwhile Vue is neither HTML [1], nor strictly speaking CSS [1], and has a very wierd concept of how objects work in JS. [1] It's a templating system with its own rules and mini-DSLs that ends up being compiled into JS.
- preommr 8y ago
  AFAIK you can't have non valid CSS in the style tag of a SFC, so, strictly speaking, it is CSS.
- nek4life 8y ago
  > and has a very wierd concept of how objects work in JS. What is so weird about it? I personally find Vue vastly more approachable than React is, especially once you have to start writing all the plumbing to get all the libraries you need to go along with it to write a real world app. > ] It's a templating system with its own rules and mini-DSLs that ends up being compiled into JS. Vue has the option to use Webpack to compile html compliant templates to JS functions just like JSX (which BTW is not JavaScript and not HTML compliant and is also a separate concept that needs to be learned as well.) CSS is just another add-on through Webpack when using Single File Components. Nothing really ground breaking here except for the fact that it creates a nice separation of concerns. This is especially true on teams with junior devs or designers. Or with a team that works on a site with mixed MPA and SPA features.
  - dmitriid 8y ago
    > What is so weird about it? I go a bit in depth here: https://news.ycombinator.com/item?id=17471199 https://news.ycombinator.com/item?id=17471199 > Vue has the option to use Webpack to compile html compliant templates to JS functions just like JSX Vue's templates are not HTML-compliant. They are just that: templates. That get compiled to JS anyway. > JSX (which BTW is not JavaScript and not HTML compliant and is also a separate concept that needs to be learned as well.) JSX is a very thin DSL on top of Javascript. It's just function calls: https://reactjs.org/docs/react-without-jsx.html https://reactjs.org/docs/react-without-jsx.html Once you understand that, everything falls into place. > CSS is just another add-on through Webpack when using Single File Components. It's not a webpack add-on. It's a part of Vue's templating engine that is essentially CSS-in-JS, they just give you a template to work in.
douglaswlance 8y ago
Vue's single file components are incredible. They're so great for the developer experience, which is Vue's entire ethos. Add in Tailwind utility classes and you've got a great design system that can be built on the fly with consistent standards.
antihero 8y ago
To me this seems really implicit and magical and strange. Where is template getting assigned to the code inside the script tag? Does OtherComponent somehow mysteriously map to other-component? How does one pass arguments to it? Is a .vue file actually HTML or is it parsed somehow to be HTML? The thing I like about React is the explicitness of it. This is a source code file that exports component X. Component X uses style Y as defined above because it's explicitly passed in as a prop, etc etc.

dsego 8y ago

Yup, that's what you can have with precompiled templates. Riot.js introduced the same concept of scoped css years ago, I wish it was more popular. On the other hand it goes against the "it's just javascript" concept of React.

akuji1993 8y ago

Hm, I don't share your opinion on this matter, to be honest. You can easily avoid this in both Angular (which does it out of the box) and React by including CSS Modules (https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules) which, if you use create-react-app to build your projects, is a 5 minute change to your architecture. So there really is no reason to write that down as a con for React.

scottrepreneur 8y ago
Works out of the box for the most recent version of CRA, as well.
dictum 8y ago
You're right, but community support around a certain pattern often makes it the de-facto practice, so defaults matter even for a non-opinionated library (where "defaults" are essentially what tutorials and thought leaders point to)
- cynicalreason 8y ago
  I always thought css-modules is the de-facto practice
  - therealmarv 8y ago
    I know a ton of companies who did not even heard the memo about it.
preommr 8y ago
I have so many small components that I would loathe to have a separate stylesheet. Yes, it's a small thing to just switch tabs, but this is a small problem. And these small problems add up and can be a huge pain. I really really like the SFCs in vue and compare it to a bit of butter on toast. It might be a small thing, but it seems like it makes a big difference.
- antihero 8y ago
  So you can just use styled-components as in the OP
therealmarv 8y ago
You can avoid many things by forcing yourself to use this and this practice. In my experience not all developers out there know what is "good" and what is "bad" practice and there are certainly many React developers out there who never heard about CSS modules. Let's say better it's not a flaw in React but a trap which can cause huge maintenance headache in my opinion.

haukur 8y ago

What you linked is "CSS-in-JS" (in the sense that the library/framework you use transforms the output for you, for convenience, i.e., you're not writing BEM or whatever - same as in the original article). Vue scopes the styles by adding a data attribute. https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-cs... Inspect the result here: https://codesandbox.io/s/3v0pjzoy7q https://codesandbox.io/s/3v0pjzoy7q

dmitriid 8y ago

> a language flaw in the React concept. What language are you talking about? React is Javascript > Look at this beauty for comparison Meanwhile Vue is neither HTML [1], nor strictly speaking CSS [1], and has a very wierd concept of how objects work in JS. [1] It's a templating system with its own rules and mini-DSLs that ends up being compiled into JS.

preommr 8y ago
AFAIK you can't have non valid CSS in the style tag of a SFC, so, strictly speaking, it is CSS.
nek4life 8y ago
> and has a very wierd concept of how objects work in JS. What is so weird about it? I personally find Vue vastly more approachable than React is, especially once you have to start writing all the plumbing to get all the libraries you need to go along with it to write a real world app. > ] It's a templating system with its own rules and mini-DSLs that ends up being compiled into JS. Vue has the option to use Webpack to compile html compliant templates to JS functions just like JSX (which BTW is not JavaScript and not HTML compliant and is also a separate concept that needs to be learned as well.) CSS is just another add-on through Webpack when using Single File Components. Nothing really ground breaking here except for the fact that it creates a nice separation of concerns. This is especially true on teams with junior devs or designers. Or with a team that works on a site with mixed MPA and SPA features.
- dmitriid 8y ago
  > What is so weird about it? I go a bit in depth here: https://news.ycombinator.com/item?id=17471199 https://news.ycombinator.com/item?id=17471199 > Vue has the option to use Webpack to compile html compliant templates to JS functions just like JSX Vue's templates are not HTML-compliant. They are just that: templates. That get compiled to JS anyway. > JSX (which BTW is not JavaScript and not HTML compliant and is also a separate concept that needs to be learned as well.) JSX is a very thin DSL on top of Javascript. It's just function calls: https://reactjs.org/docs/react-without-jsx.html https://reactjs.org/docs/react-without-jsx.html Once you understand that, everything falls into place. > CSS is just another add-on through Webpack when using Single File Components. It's not a webpack add-on. It's a part of Vue's templating engine that is essentially CSS-in-JS, they just give you a template to work in.

douglaswlance 8y ago

Vue's single file components are incredible. They're so great for the developer experience, which is Vue's entire ethos. Add in Tailwind utility classes and you've got a great design system that can be built on the fly with consistent standards.

antihero 8y ago

To me this seems really implicit and magical and strange. Where is template getting assigned to the code inside the script tag? Does OtherComponent somehow mysteriously map to other-component? How does one pass arguments to it? Is a .vue file actually HTML or is it parsed somehow to be HTML? The thing I like about React is the explicitness of it. This is a source code file that exports component X. Component X uses style Y as defined above because it's explicitly passed in as a prop, etc etc.