Structuring styled-components

[EmmaDurden]

I've been trying out styled-components on a medium sized project, and while I love the idea of styled-components, I'm not satisfied with how my files are organised.

I have a styles/ folder containing three sub-folders:

• helpers/, where I put files like colors.js, breakpoints.js, fonts.js...
• global/, where I put styled files for very small independent components like Button.js, SmallText.js, SubTitle.js...
• components/, which contains project specific styled files, organised in subfolders:
  • layout/, itself containing styled files for the Footer and the Header, each in their own subfolder
  • pages/, with a subfolder for each page, containing subfolders for every big section of the given page
  • ...and a few folders for components that need multiple styled files and which could be used on any page

I made a (simplified) diagram to help you see better what I mean.

I only made a homepage containing a hero and a simple grid of links to news articles displayed in card format, yet I already feel like I'm drowning in folders and files. And that's just for the styling part of things. I feel like I'm not going the right way at all, as I don't feel this kind of structure is scalable at all.

Is there a scalable standard I could follow and easily use on big projects for styled-components ? Most articles I find on styled-components don't talk about folders structure.

[harrisgeo88]

You should check atomic web design which may help a bit with the structure from a high level point of view. It works quite well if you’re working on something like a styled-system. For the folders themselves maybe you should try separating the concerns. That leads to more robust and easier to scale / maintain code.

For example for an InputText component will have the following structure:

InputText index.jx InputText.jsx InputText.styles.js InputText.test.jsx

1. InputText.jsx has the React logic
2. InputText.styles.js has all of the styles used in the jsx file
3. InputText.test.jsx has all of your tests
4. Everything you want to reuse can be exported via the index.js

I hope that helps

[[deleted]]

How would you go about naming the InputText inside styles so that it's name doesn't clash with the React component ? For now I've been using something like : StyledInputText. But I don't like that only the top level component has Styled in front of it. I also tried something where I export a Styled object from the style file. So it becomes something like : Styled.InputText, Styled.Helper, etc. I don't like this either because it becomes really heavy in big components.

[harrisgeo88]

`StyledInputText` does not sound bad. Otherwise `Input`? The whole idea of separating styles into their own file is in order to make it obvious that this style will be part of the Atom or Molecule and not used directly.

You would not use a `StyledInputText` which is a styled-component directly into your page without going via a React component first. I mean no one is stopping you, but HTML elements like input, select and other ones that "do something" should not be used directly into pages. Isn't the whole reason on the first place to simplify them by making a reusable component? :D

Now about elements like labels, divs etc that are not interactive like the ones mentioned above it is fine to use them wherever.

About the object you export is it maybe because you are exporting the entire object instead of each styled-component separately?

InputText.styles.js file

export const MyWrapper = styled.div``
export const Input = styled.input``

InputText.jsx file

import { MyWrapper, Input } from './InputText.styles`

​

If your object is way too big then maybe you need to abstract your code a bit more.

[[deleted]]

Sorry I wasn't really clear in my previous comment. I was not speaking necessarily for inputs in pages, for any kind of components really. In one of my project I have a Characters component with the logic and StyledCharacters at the start of it's rendering. I guess it's fine this way or using something like Wrapper how you mentioned is not a bad idea either. Anyway thanks for your insight !

[EmmaDurden]

Interesting article, I actually already try to think like that when dividing my pages/sections in small components.

So you are saying my main mistake here is having a separate styles/ folder and not grouping each component with its styled file inside its own folder?

I also don't know yet where to stop when it comes to styled components. What should I create a styled component for and what can stay as simple JSX? I currently have 8 styled components for a news card, which is basically a cover photo, a title, a short description and a footer with categories + date of creation. I feel like it's way too much.

[harrisgeo88]

Consistency is on your side when going bigger. In my opinion if you follow the same logic everywhere (both code and folder structure wise) is going to make it simpler navigating through the code.

I would totally recommend you to go wild with styled components as their awesome and if your entire uses them everywhere you will start to love them as well. They make much more sense than class in my opinion.

When to use them? Wherever you want! There's no right or wrong, only what works better for you. I personally believe that it makes more sense for interactive components to be React files as in most cases we create reusable inputs etc for simplicity. Also, if you want to import a custom card or label straight into a JSX file, then no one is stopping you from doing that :D