Стилизованные компоненты и медиазапросы

Question

В компании мы хотим создать несколько стилевых компонентных утилит для написания элегантных медиа-запросов и спорим, какой способ выбрать:

• с интерполированной строкой, такой как:

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

• или возврат только фрагмента строки @media, например (например, @media (min-width: 100px):

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

Какие недостатки/ предостережения от этих двух подходов?

Answer 1

Я настоятельно рекомендую второй подход, и именно так он был реализован в двух компаниях, над которыми я работал, используя стилевые компоненты.

Причина, по которой я не рекомендую первый подход, заключается в том, что он заканчиваетсядо делать больше работы.Помеченные литералами шаблонов разбивают строку на массивы, что приводит к ненужному давлению в памяти, где вторая стратегия интерполяции в простой строке - это более легкий вес.