Highlight the importance of using the css helper

Aside from being a nice tool for organizing/reusing css in different ways, we all know that css helper is also needed to nest interpolations etc…

I think that it would be helpful for those learning sc for the first time to encounter examples and notes early on about the importance of the css helper. Perhaps we could even stress using it regularly as a best practice, especially as it sounds like it will be more and more essential with minification, analysis, etc…

Preferring:

const StyledDiv = styled.div`
  background: #00f;

  ${({myProp}) => myProp && css`
    padding: 10px;
  `}
`

Over:

const StyledDiv = styled.div`
  background: #00f;

  ${({myProp}) => myProp && `
    padding: 10px;
  `}
`

Much of this is already discussed in: https://github.com/styled-components/styled-components/issues/1178, but I wanted to open an issue to discuss how we could surface some of this into the docs.

[chasemccoy]

@alaskaa Any updates on this?

@mxstbr I consider myself a pretty advanced styled-components user (have used it for years and in many projects), and I spent the entire day today trying to figure out why my components were behaving in weird ways when I realized that I had forgot to use the css tag on some nested interpolations. I read back through the docs, and sure enough it’s not mentioned anywhere other than in the API reference (from what I can see).

It would be great to document this more (I would be happy to make a PR!), but I also think it would be awesome to somehow lint or warn against this. The type of bugs that can result from this error (or at least the ones I ran into) are extremely hard to debug and there’s no indication that the user is doing something wrong when they use an interpolation without the helper. Just something to consider, it may save someone some time in the future. It definitely would have saved me some 😅

[mxstbr]

This is such a great point, I think many people miss this fact. I think there’s a couple good first steps:

1. Make sure the docs and examples are using css everywhere
2. Have an FAQ entry “Why should I use the css helper over just a string?”
3. Maybe mention it more often elsewhere in the docs?

Any PRs making this more obvious would be much appreciated! 🙏