Styled Components Folder System

Question

I've been reading various articles on styled-components in React. One such article suggested using presentation and structure components, but on the styled-components docs we are shown both presentation and structure are placed within the same file.

Is this an anti-pattern for styled-component? Thank you for any help.

Answer 1

I don't think so. Wouldn't you agree that styling was a presentation concern? In that structure you could put the styles in their own folder or alongside the presentational components.

I can give you my view on folder and naming structure.

If you want to split out logic and presentation you could go with something like this:

- src/
  - components/
    - SomeComponent/
      - index.js         <- Container/Logic
      - presentation.js  <- Presentation/Layout
      - styles.js        <- styled-component
      - index.test.js    <- unit tests
      - _snapshots_/     <- snapshots
    - AnotherComponent/
      - index.js
      - presentation.js
      - styles.js
      - index.test.js
      - _snapshots_/

However, in my professional experience I've found no gains from readability or maintainability down the line having used this pattern. In fact it makes it harder for newcomers to this tech to understand and work with.

I'm not the only one. Dan Abramov himself who originally proposed it has since suggested it isn't a good modern solution for the state of the tech we have now. His article on Presentational and Container Components.

Another view on the matter from Brad Frost where he goes down the Container/Presentation route but in his own way.

Please let me throw this out there for your consideration; Don't split your React components out like that unless you really know you will get gains from it due to the nature of what you're building. Follow what I have above and just don't have the presentational files, put the Component all in index.js, split out code where you can get wins, and focus on simplicity.

- src/
  - components/
    - SomeComponent/
      - index.js         <- Component
      - styles.js        <- styled-component
      - utils.js         <- component-specific helpers/utils
      - index.test.js    <- unit tests
      - _snapshots_/     <- snapshots