re: DRY to the point of WET yak shaving VIEW POST

FULL DISCUSSION
 

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>
)
 

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

 

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.

code of conduct - report abuse