DEV Community

[Comment from a deleted post]
Collapse
 
ha404 profile image
Chris Ha

When using styled-components I would write those WET components you hint are unnecessary as separate components within the same file. Would that still count?

const SmallBlueLabel = styled.small`
  color: blue;
`

const HeroHeader = type => styled.withComponent(type)`
  font-weight: 700;
`

export default = () => (
  <div>
    <HeroHeader type="h1">...</HeroHeader>
    <SmallBlueLabel>...</SmallBlueLabel>
  </div>
)
Collapse
 
dwmiller profile image
David Miller

I'd say it's premature, but hardly the end of the world. If you're all in on styled components, it makes sense as you're also replacing your need for a stylesheet.

That said, for the love of god don't export the things. I just inherited a project where the original dev was doing what your example is doing, but in addition he was exporting these tiny components and using them elsewhere. So now everything is weirdly intermingled with these trivial dependencies and it's a nightmare to trace around the application

Collapse
 
ha404 profile image
Chris Ha

Yeah, styled-components adopts the BEM philosophy of not being shared so I would never need to export them.

If I ever had to export them, they'd be in their own file contained in a shared component folder.