@tdtdtd

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

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

zr1ehD4.png

И при определённых брейкпоинтах нужно менять его стилизацию.
Я вижу 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 свойств запихивать в пропсы, хотелось услышать мнение ещё кого-то по этому поводу.
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 2
yarkov
@yarkov Куратор тега Vue.js
Проект "Жизнь после смерти" - lifeafterdeath.ru
Я бы придерживался правила: всё что можно сделать без js - надо делать без js.
Ответ написан
Aetae
@Aetae
Тлен
Не согласен с отписавшимися выше. Компонент должен быть чёрным ящиком. Внешний пользователь ничего не должен знать о его внутренней структуре. Пользователь компонента передаёт ему свойства и получает гарантированый результат.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы