Styled-components: Best practice for structuring

Created on 5 Apr 2017  路  3Comments  路  Source: styled-components/styled-components

I really like styled-components, but on my current project I find myself using more time to create components/files, copying names and restructuring then actually creating styles. The project does not have a lot of reusable components because its a campaign site and not designed modular. Files are adding up to the hundres for a pretty small site and it's getting pretty time expensive to browse through all components, child-components, child-child-components etc.

@mxstbr gave an answer here, but I'm looking to see if other people have successfully made components other ways without loosing too much control? Or if people deviates from the default in some cases.

I made an repo to try other structures: https://github.com/robbue/styled-components-structure

  |-- Button.js
  |-- Header.js
  |-- Wrapper.js
  |-- index.js

MultipleComponentsOneStyleFile
  |-- Button.js
  |-- Header.js
  |-- Wrapper.js
  |-- styles.js
  |-- index.js

EverythingInOneFile
  |-- index.js

OneStyleFile
  |-- index.js
  |-- styles.js
discussion

Most helpful comment

I was using CSS Modules before, and the feature that sold me to styled-components is collocation, meaning the style lives in the same file as the component.

In your repo, I would only call ModalBox a component, the rest are only styles since they are not reused at all, and I would go with EverythingInOneFile.

However, in a real project Button could be a reusable component with some logic that would look something like this

const StyledButton = styled.button`
  background: blue;
  color: ${props => props.color};
`;

const Button = ({ onClick, children, color }) => (
  <StyledButton color = {color} onClick = {onClick}>
      { children }
  </StyledButton>
)

export default Button

This is a component collocated with its style and would be in a single file, this way I could change the style of my component and its logic in the same file.

All 3 comments

I was using CSS Modules before, and the feature that sold me to styled-components is collocation, meaning the style lives in the same file as the component.

In your repo, I would only call ModalBox a component, the rest are only styles since they are not reused at all, and I would go with EverythingInOneFile.

However, in a real project Button could be a reusable component with some logic that would look something like this

const StyledButton = styled.button`
  background: blue;
  color: ${props => props.color};
`;

const Button = ({ onClick, children, color }) => (
  <StyledButton color = {color} onClick = {onClick}>
      { children }
  </StyledButton>
)

export default Button

This is a component collocated with its style and would be in a single file, this way I could change the style of my component and its logic in the same file.

@YasserKaddour Does this approach scale well for larger applications? using bootstrap or bulma as an example, would you create a styled-component for everything (grid, columns etc)?

My application is still fairly small but I already have a LOT of css inserted into the head and I'm wondering how this is going to look as the app grows.

@j-jackson For grid system and other collection of components, you can regroup them into one single file like how grid-styled does it.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

artalar picture artalar  路  3Comments

arstin picture arstin  路  3Comments

kitten picture kitten  路  3Comments

const-g picture const-g  路  3Comments

ekfuhrmann picture ekfuhrmann  路  3Comments