Как повысить реюзабельность стилей в styled-components?

Question

[F1eX]

После определенного время работы над проектом, где для вёрстки используется styled-components начал ловить себя на мысли, что уж очень часто приходится копипастить куски кода вроде:

display: flex;
flex-direction: row;
width: 100%;

Конечно, "системообразующие" параметры, вроде цветов тем, шрифтов и т.п. занесены в переменные, но уж слишком сильно зудит момент описанный выше.

Вопрос - есть ли смысл выделить отдельный css-класс для подобных часто используемых комбинаций свойств и назначать его компоненте в самой разметке через className вместо того, чтобы прописывать эти свойства каждый раз в styled'е? Изменит ли это размер бандла в лучшую сторону, ведь styled все равно прописывает все эти свойства инлайном?

P.S. Про то, что можно назначить подобную "болванку" с помощью js-объекта в style={} я в курсе, но это далеко не всегда подходит, ибо style={} часто задействется с тернарками для стилизации состояний.

Comments

[WbICHA]

Не совсем понял, такой вариант не устраивает?

import styled, { css } from 'styled-components';

const someStyle = css`
  display: inline;
`;

const StyledDiv = styled.div`
  ${someStyle}
`;

css чтобы плагин для ск считал строку цссом.

[F1eX]

Странно, вариант с css почему-то проморгал - на ск недавно перешел, но это то что мне как раз и нужно. Спасибо

Answer 1

[Artem Pyvovar]

Создай отдельный файл и через пропсы прокидывай.
Но вообще можно и дублировать стиль. Но он же занимает место !
Если проэкт будет двигаться по позициям в поисковой выдачи, то для робота важна скорость загрузки страницы. Возмжно эти десятки строчек будут отделять твой сайт от первого места )