Styled Components v3.0.0

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

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.

Your Button.scss would typically look like:

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

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

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.

>- 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.

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.

I am quite happy with VanilaJS™, but I do sometimes use jQuery as 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).

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!

- 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