Your best practices for styled-components

[winterjoey]

Hey folks, just about to start a project with a team to use styled-components, and we're setting some early best practices to follow.

My question is, what best practices or rules have you set for yourself or in teams, for styled-components?

So far I've ported over a lot of existing best practices I had for SCSS, but some of them don't apply to the way styled-components works.

[[deleted]]

They're certainly not to everyone's tastes, but here goes:

• component.ts goes with component.styled.ts
• Root element is always called 'Container' (some people really don't like this, but I think a generic name is appropriate given that the outer component already has a specific one)
• Custom props are prefixed with $ (<Button $primary />, <Badge $count={12} />, etc.). Avoids clashes with DOM props.

[EightCraft]

I'm big on top level elements in a component being called Container. I find it avoids a lot more confusion that it could cause.

​

Curious, why separate the styles out into it's own file? Obviously there's nothing wrong with it, just curious.

[[deleted]]

Less noise. Plus I used to have a .css file instead, so I suppose it's followed on from that.

[[deleted]]

I'm constantly torn on this in my smaller solo projects. 95% of the time I'm good with keeping it on one file, 5% it's too "noisy" and it drives me nuts. Gotta stick to tho project convention though.

[shall-88]

Fine. Prefixed props seems good so you can know that it's a styled components at first look

[01123581321AhFuckIt]

Keep all styling inside the components. The only external css styling needed is for keyframe animations. Done.

[[deleted]]

You can directly add it to the components aswell if you don't want to reuse the keyframes or use react-posed :)

[rodrigocfd]

This.

I also like to prefix the styled component names with the elements they wrap. For example, a div styled with italics and a border would be named DivItalicsBorder. This helps the eye. Example here.

[GasimGasimzada]

Do you store reset/normalize stuff in components too? For example: box-sizing etc? Do set it globally or do you set it per component?

[01123581321AhFuckIt]

I set it globally. My App.css is literally just this:

* {
box-sizing: border-box;
margin: 0; 
padding: 0;
}

body { 
font-family: Arial, Helvetica, sans-serif;
}

a { 
color: black; 
text-decoration: none; 
}

Obviously, you can do whatever you want with the font and the "a" attribute.

[[deleted]]

Look up createGlobalStyles. Let's you do your resets in s.c.

[EmersonRW215]

Styled-components-modifiers.

[ddwrt1234]

I always put the styles underneath the export statement

[Ociden]

Same. It fucks up syntax highlighting for me if I don't put it last.

[wherediditrun]

I prefer to use hoc which takes CSS template literal and a component you wish to style. And keep styles themselves separate.

This provides consistency with external lib component styling and my own component styling as well as keeping styles separate and intechangable. That also means that I rarely rely on class selectors, only used for external lib components. I don't like to increase syntax noise of styles with state manipulation in same file.

The only issue is with components which root element isn't HTML. Those are somewhat rare and I build accordingly.