In company we want to create some styled-component util to write elegant media-queries and we are arguing which way to choose: with interpolated string like: styled.div` ${media.mobile` color: red `} ` or returning only @media string fragment like (eg. @media (min-width: 100px): styled.div` ${media.mobile} { color: red } ` What are disadvantages / caveats of this two approach?

Reputation: 556

Styled components and media queries

In company we want to create some styled-component util to write elegant media-queries and we are arguing which way to choose:

with interpolated string like:

styled.div`
  ${media.mobile`
    color: red
  `}
`

or returning only @media string fragment like (eg. @media (min-width: 100px):
```
styled.div`
  ${media.mobile} {
    color: red
  }
`
```

What are disadvantages / caveats of this two approach?

Upvotes: 1

Answers (1)

probablyup

Reputation: 8134

I highly recommend the second approach, and that's how it's been implemented at the two companies I've worked at using styled-components.

The reason why I don't recommend the first approach is it ends up doing more work. Tagged template literals cut up the string into an array which causes unnecessary memory pressure, where the second strategy of interpolating in a simple string is lighter-weight.

Upvotes: 2

Styled components and media queries

Answers (1)

Related Questions