Стилизованные компоненты вложенных стилей или нет?

Question

Какой подход лучше для больших масштабируемых приложений при использовании Styled Components?сделать отдельные переменные для каждого тега HTML, или просто вложите CSS внутри переменной?

Например: у меня есть следующая простая структура:

ul {
  li {
    a {

    }
  }
}

const list = styled.ul`
   padding: 0;
   li {
    padding: 10px 0;
      a {
        color: black;
      }
   }
`

ИЛИ

 const list = styled.ul`
       padding: 0;
    `

const listLi = styled.li`
       padding: 10px;
    `

const listA = styled.a`
       color: #333;
    `

Answer 1

Отделите как можно меньше и комбинируйте много раз. Это позволит вам легко использовать компоненты в вашем проекте.