I'm a huge fan of styled components for React/Redux projects. It really makes styling components easier while also promoting reusable code. Being able to pass props to your styled components is a huge win too.

I don't understand the appeal of styled components at all - what's the benefit over simply having `import './MyComponent.scss` at the top of your file? I can't imagine working on an app where the css is mixed directly in with the JSX.

1) I can directly style multiple components within a file, each having their own style.

2) Since it's in javascript, I can reference JS variables within the file. I can derive CSS values from props passed into the component: styled.div`color: ${props => props.userColor}`

3) I can extend other styled components' styles - i have a small shared library of central components like buttons, inputs. I can extend those: styled(MyThemedButton)`color: ${props => props.specialColor}`

4) I can use awesome micro-libraries like styled-system to add parameterization to the JSX elements: const Foo = styled.div`${space}`. ... <Foo key='1' mx={1} my={2} />... <Foo key='2' mx={2} my={3} />

5) I can change the style of every single styled component with a ThemeProvider. styled.div`color: ${props => props.theme.headerColor}`

6) I can see everything related to the component in one single file.

The most immediate benefit is never having to think about and munge class names.

Your Button.scss would typically look like:

    .Button { ... }
    .Button--primary { ... }
    .Button--small { ... }
    .Button--alt { ... }

And then you need to repeat all those in Button.js (but really they're globals and anything could be using them...)

    return (
      <button className={classnames('Button', {
        'Button--alt': props.alt,
        'Button--primary': !props.secondary,
        'Button--small': props.small,
      }, props.className)}>
        Click Me
      </button>
    )

(I even skipped over the very first issue you run into, which is building up the className string, which is why people use the classnames helper everywhere.)

And that's the simple case with only one child component – usually there are even more dynamic class names to consider for all the possible states, and other children that need their own classes as well. Once you use a solution like Styled Components, building up classes using that damn classnames helper just seems so primitive and tedious. The duplication involved in keeping selectors from the CSS in sync with those actually used in the components also drives me nuts.

I recommend giving it a try.

Few quick reasons off the top of my head. - HMR works well - Theming, variables with things like ternary - Code reuse is better (Especially with theming) - Component can contain everything in one file - Extend other components easily - Better developer work flow - Contained class names

> HMR works well

Have you run into problems with hot reloading of stylesheets? Seems like the kind of problem that should be solved by now (for reference, LiveReload was doing CSS injection back in 2011, and maybe some other tool even earlier: https://web.archive.org/web/20110428025941/https://github.co...)

Isolating styles to the component.

If you use css-modules the styles will be isolated to your component unless you add :global() around them.

I think css-modules requires a bit more wiring up (though CRA 2 will bake it in without ejecting, I believe). Of course, styled-components and css-modules have the same lead developer, but it appears that css-modules isn't getting as much love, as discussed:

https://github.com/css-modules/css-modules/issues/187

From the point of view of a guy who skipped the React, Angular, Vue hypes until today:

- Where are we going to?

- What is the sense behind this syntax?

- Can we go back to HTML/CSS/JS when the hype's over?

>>a guy who's skipped the React, Angular, Vue hypes

This is the root of your consternation. Like everything in our industry - experiment, build, then judge. I was a naysayer initially too. Then I tried React, Redux, styled-components, etc. and now I'm a believer. Combine this with modern CSS like Flexbox and CSS Grid and it truly is a golden age of web development!

The single big thing that makes me go back and forth about whether I (deep down) like these systems is the surrender of control.

On the one hand: It is powerful at automating some the typical tedium you always have. It gives you a better chance to end up with a decent view model, by forcing it upon you.

On the other hand: You lose control. Almost always you can gain it back, but it is an uphill battle. If you know you need low level control (for example over complex animations and interactions in your UI) you've got to think carefully.

It all comes back to perspective. As an interaction engineer I really hate the process of trying to make a specific animation work the way I want inside of a React managed DOM. As an application developer, the purity of the approach is extremely attractive.

Also I must brush up on Grid. It's about time we got rid of god damn tables.

I agree, that's why I like styled components so much. It's all based on vanilla CSS - there's no new syntax. I use animations, pseudo-classes, etc all with styled-components. Animations with react are cumbersome. So I try as much as possible to fall back to CSS animations - they yield better perf anyway. With styled components this becomes easier since you can have CSS values derived from React props.

We're already back friend. Just pickup React and you're good to go. The high level overview is super simple (use state to deterministically generate markup), it's easy to use once you spend an hour with JSX, its got huge mindshare so it's not going anywhere anytime soon, and most importantly it's a huge improvement over all the jQuery acrobatics you'd need to do similar interactive components.

The current trend with react reminds me of jQuery 10 years ago. It just fits like a glove. The thing you didn't know you were missing until you found it. Vue is very similar. You will start seeing react be the default option for new projects all over the industry. Yes, you should learn it now.

When jQuery was young it was not alone.

What are the current Dojo? Or the current Mootools, prototype?

Backbone, ember, angular, web components. They're all ok and perfectly usable but they're losing to react by a wide margin.

Isn't Backbone the closest analogy to React, in that it tries to be modular enough to be as small/big as needed -- as opposed to a full MVC-ish framework like Angular and Ember?

Backbone is an elegant library but I think its popularity and ecosystem were on a decline even before Walmart -- which was one of the biggest corporate contributors (e.g. Thorax [0]) -- did a complete overhaul in 2016 to React [1]

[0] https://github.com/walmartlabs/thorax

[1] https://medium.com/walmartlabs/publish-react-native-bundles-...

No, Backbone is a collection of things and closer to a framework rather than a library, like React.

Backbone has Models, Collections, a Router, History, Sync, View and Utilities.

In contrast, React is only the view part.

So, it would be closer to say that React is just the View part of Backbone, you need to bring in the rest yourself.

Vue and Angular 1 are in the same family. For the React family, there's Mithril.js.

It's an useful standard for a JS only web app.

Once you work a bit with React/Angular/Aurelia, you start noticing that having your styles somewhere in a stylesheet is somewhat clumsy for reusable components or overly dynamic components.

You end up having to refactor with your stylesheets very often as your app grows and things can quickly turn into a mess.

You are then tempted to put style="" declaration in your .jshtml (or equivalent) templates but that's a also mess. So your start developing a way to inject styles into dom elements. This then grow up into some strange frankeinstein that no other devs can work with because you documented nothing... so you simply start using https://www.styled-components.com instead.

That is what WebComponents are for.

>- What is the sense behind this syntax?

>- Can we go back to HTML/CSS/JS when the hype's over?

Frameworks like React and Vue make building large, complicated front-ends a lot easier and predictable.

I use React for most projects I work on. I also use HTML, CSS and VanillaJS for quite a lot of projects too. I find knowing both gives you great flexibility and fits the code to appropriate applications well.

The alternatives are shoehorning React into simple content-centric pages (bloat), or stitching together a bespoke set of logic for a large complex app noone will be able to maintain (spaghetti).

What sense? To spend more billable hours at (freelance) work. :)

Sure, I have been ignoring the hype so far.

I am quite happy with VanilaJS™, but I do sometimes use jQuery as well.

I think we learn that there is value even in bad implementation. For example, a lot of what custom tags promised in ColdFusion 20 years are finding fruition in client-side components.

Likewise, I think there's value in scoped work, as opposed to the mess than can come of globals. Otherwise you find yourself hard-coding !important when you need to make something work.

I prefer "build on lessons learned from" to "going back to" :-)

If you want to know what this is, follow https://www.styled-components.com

I was a bit confused when I followed the HN link originally.

As someone who looked at using styled components for a small project, but chose JSS (despite liking styled components) for various reasons, I would love to hear from someone with experience with both styled components and JSS - what do styled components offer which JSS does not, or, why would you choose one over the other?

This seems to be react only? That bit of information is buried. Seems like a good opportunity to release a web component library for the whole web dev ecosystem.

Angular has this baked in (can't speak to other frameworks)

I really enjoy using this library. Thank you team!

Anybody have an idea what the exciting new features they’re planning are?

Yeah, I do! ;-)

- Performance performance performance (expect some news on that front soon)

- Streaming server-side rendering support

- A better global CSS API that allows you to use your theme dynamically

- babel-macro mode