CODEWITHSUNDEEP
cssreactjssassarchitecturestyled-components
Damir Dautovic
Damir Dautovic

Reputation: 29

CSS architecture, 7-1 and styled components

Apart from many great things with Styled components and generally CSS-in-JS, when the code base grows and more developers are in, things can get really messy.

Some stuff around CSS and SCSS like 7-1 patterns (https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture) if are set correctly and delivered with some guides on how the interface layout and components works, things can get quite smooth and organized and new people can onboard easily to the codebase and write a decent CSS even though they hate it or don't know it.

I like the power of Styled components and CSS-in-JS, all of this could be onto something amazing... but yet I find it quite heavy to maintain at large scale.

What I am interested in is the balance of these two, does it make sense to seek for such a balance first of all? What are your suggestions for something similar to 7-1 patterns for styled-components?

Upvotes: 0

Views: 594

Answers (1)

Raicuparta
Raicuparta

Reputation: 2115

CSS-in-JS brings style and behaviour closer together, that's the whole point. So it would make sense to keep your style files as close as possible to your components, which is the opposite of what 7-1 suggests. If you want to completely separate style and components, perhaps CSS-in-JS isn't the best approach.

For shared variables, themes are very useful: https://www.styled-components.com/docs/advanced#theming. It also comes with the added bonus of allowing you to have multiple different themes and switch between them easily.

Upvotes: 1

Related Questions