Introduction to styled-components

After using styled-components for a while, you'll be begging to use classNames again. Here's just a few limitations:

1. styled class names are random stings that you have no control over, so looking at the DOM tree to debug something is a nightmare.
2. Styled is really only good for styling a simple html tag. The moment you try to style any other component you'll realize things like the props to style are different from the props to render, and generic parameters don't transfer from a styled component. So say goodbye to ever using Typescript.
3. The styled css props overwrite anything else giving through normal means like global css, or className, so your component becomes useless for sharing with others.

That's just a few. Sending in a simple string to the className is so much simpler and so much more powerful.

I think you all should reduce the toxicity in this comment section, he is a fan of styled components and he prefers it to BEM, he made his suggestion not a statement, I personally out grew styled components but that doesn't mean someone shouldn't write about how they feel about it positively

I must say, styled components are kind of a newbie trap.

They sound cool, they look cool when you are writing your first code with them, so, you think, why not use them?

In these moments you don't think (unless you already have experience) about whether they are performant, easily maintainable or any of that other boring stuff.

And, by my experience, they aren't any of those:

• they introduce an performance tax, and if your project ever grows to a point where performance starts to matter, there's not much to be done about it.
• they are not compatible with Typescript, which is a huge deal breaker IMO
• they are not lintable and not really checkable at compile-time at all. So support checking, autoprefixing and all other postcss features are automatically out of question

And frankly, the library (and the concept itself) are kinda old, so there were additions to css that do same kinds of things easier.

If you just need to represent component states - write a few classes. BEM or css-modules - frankly, does not really matter.
It's more clean - you separate different states into different classes, instead of opting for what is basically if expressions in one huge amorphous style.

If you really need to style something according to props, and there are more than, say, 3 states - use CSS-variables (if your supported browsers allow you to). It's simple, native and performant.

If you're using something that supports CSS modules like Next JS I recommend trying out SCSS modules.

I am not exactly sure what you mean when you say you've been styling using classNames. Have you just been providing a raw object to classNames or have you tried CSS modules?

SC is old now people. It's just CSS-in-JS.
cssinjs.org

It's cool, I love it in some projects but can cause problems in others with homebrew static publishing solutions that give FOUC using it.

Also homeboy and others, please stop using "Stop using/doing" in these post titles. It's annoying!!!

Some would argue class names is back in a major way with Tailwind.

I recommend adding syntax highlighting to your long code block.

Also I recommend being consistent with indenting the CSS styles and adding spaces at the start of your comments.

```jsx
// Header represents the h2 tag
const Header = styled.h2`
  color: #192041;
  font-weight: 700;
  margin-bottom: 15px;
  font-family: "Merriweather", serif;
`
```

// Header represents the h2 tag
const Header = styled.h2`
  color: #192041;
  font-weight: 700;
  margin-bottom: 15px;
  font-family: "Merriweather", serif;
`

SC is awesome to me... normally so that my component doesn't get mixed up with big SC code I just put the style components in a separate file and then import them, it really makes it easier for me to use SC than other ways of doing the same. And a plus is that there are several ways to have a good performance (without sacrificing much functionality) for more complex scenarios.

Of course, if you are only going to style a very small and static app, pure css I think is the best

There's also:
Imprt {css} from 'styled-component'
Where you can assign to a variable a definite style.
If you style the same component in different ways you can do:
const example = styled(CustomButton)
background-color:blue;


I think it's good to know the available styling options, I've used pure css, sass, styled-components and now I've decided to use css modules with sass and the classnames lib to facilitate conditional styles, and I'm really enjoying it, I believe there is no silver bullet, yes, there are tools that make the development much easier, finally, using one or the other depends a lot on the project and the dev's decision-making power.

I do not suggest styled components at all. The syntax is more complex and hinder the reuse of code. Moreover you're using javascript to style your components instead of using pure css or SASS