Менять стилизацию vue компонента пропсами или css переменными?

Question

[tdtdtd]

Есть следующий блок, который я вынес в отдельный компонент:



И при определённых брейкпоинтах нужно менять его стилизацию.
Я вижу 2 возможных, вроде как плюс минус нормальных варианта, но пока не могу понять у какого больше удобства.

1) через пропсы :

<InfoBlock
  :options="{
    iconWidth: 100,
    iconMargin: 50,
    color: 'red',
    breakpoints: {
      991: {
        iconWidth: 50,
        iconMargin: 25
      },
      767: {
        iconWidth: 20,
        color: 'brown'
      }
    }
  }" 
/>

т.е. при таком раскладе я по сути внутри самого компонента крутить полученные пропсы как угодно и изменять что необходимо.

2) изменять стилизацию компонента через css переменные

<InfoBlock class="info-block"/>

.info-block {
  --icon-width: 100px;
  --icon-margin: 50px;
  --color: red;

  @media (max-width: 991px) {
    --icon-width: 50px;
    --icon-margin: 25px;
  }

  @media (max-width: 767px) {
    --icon-width: 20px;
    --color: brown;
  }
}

Оба варианта рабочие, и не знаю, стоит ли изменение css свойств запихивать в пропсы, хотелось услышать мнение ещё кого-то по этому поводу.

Answer 1

[Алексей Ярков]

Я бы придерживался правила: всё что можно сделать без js - надо делать без js.

Answer 2

[Aetae]

Не согласен с отписавшимися выше. Компонент должен быть чёрным ящиком. Внешний пользователь ничего не должен знать о его внутренней структуре. Пользователь компонента передаёт ему свойства и получает гарантированый результат.

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

Конкретно в приведённом примере подход с css +- не должен привести к проблемам, но в большинстве случаев ситуация иная.

Comments

[tdtdtd]

В теории проблемы возникали бы в ситуации, когда в css мы задавали бы какие-то конкретные значения для конкретных свойств (color: red; и тд), а так ведь просто изменяется значение переменных, которые используются внутри компонента.

Просто, если мы, допустим, кардинально меняем компонент и написанные ранее css - стили (переменные) перестают корректно работать, то не будет ли того же самого, если бы юзались только js - пропсы? Там же вероятно тоже пришлось бы их менять, как и стили.

Да и компонент вроде всё так же остаётся тем самым "чёрным" ящиком, просто с возможностью кастомизации ещё и через css - переменные.

Или всё же в какой-то ситуации, использование подобного подхода с css может дать сбой в отличии от использования пропсов? (просто я пока могу моделировать ситуацию, в которой при изменении компонента, что пропсы нужно будет менять, что css переменные)

[Aetae]

tdtdtd, для того чтобы преобразовать и адаптировать значения пропсов к изменившейся структуре - у вас будет вся мощь javascript. Для css же набор возможностей к адаптации весьма узок.

У вас должна быть возможность полностью изменить компонент так, чтобы для внешнего наблюдателя ничего не изменилось. И компоненты само собой заранее должны писаться таким образом(никак не влиять на окружение).

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