Styled-components-website: Highlight the importance of using the css helper

[halvves]

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.

[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! :pray:

[SaraVieira]

@mxstbr I can't add these things but can you give me a good description of why this is a good practice?

[kitten]

@SaraVieira Just to mention a couple of reasons:

• Nested interpolations (Not using css means styled-components won't be responsible for the interpolations; they'll be stringified immediately)
• Syntax highlighting / Linting (Every editor/linter needs something to target)
• Transpilation (Likewise we'll need it to transpile a couple of things e.g. minification)
• Future strict parsing/conversion (Once ISTF/precompilation becomes a thing regular template literals won't cut it anymore)

[alaskaa]

Has anyone claimed this or could I work on this? Despite being interested in why this is good practice and why it should be followed, I think it would be great to make this even clearer in the docs and help people early on to write meaningful styled components.

[mxstbr]

@alaskaa nobody's tackling this right now, we'd appreciate a PR!

[alaskaa]

Awesome! I'll start working on this then.

[mxstbr]

Ace!

[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 😅

[chasemccoy]

I am honestly quite shocked that I haven't ran into any issues with this before now 😳

[stevemao]

@chasemccoy PR welcome 👍

[alaskaa]

@chasemccoy feel free to take this over! I started working on this but then life started getting busy and I forgot. Think we'd all benefit from your explanations and a PR. I know I encountered this a couple of times too, but struggled how to explain it best!

[robbue]

import styled, { css } from 'styled-components';

const colors = {
   red: css`red`,
   blue: 'blue'
};

const Text = styled.p`
   color: ${props => props.useBlue ? colors.blue : colors.red};
`;

Is there any benefits do use css like on colors.red?

Also, does this give any benefit over the above (in a SSR/Next.js application)?

const Text = styled.p`
   ${props => props.color ? css`color: ${props.color}` : css`color: ${colors.blue}`};
`;

The questions are asked in concern of memory leak (#2913)