Change styling of a vue component with props or css variables?

Question

css

There is the following block, which I moved into a separate component:



And at certain breakpoints, you need to change its styling.
I see 2 possible, sort of like plus or minus normal options, but so far I can’t figure out which one has more convenience.

1) through props:

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

those. in this situation, I essentially twist the received props as I like inside the component itself and change what is necessary.

2) change the styling of the component through css variables

<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;
  }
}

Both options are working, and I don’t know if changing css properties should be stuffed into props, I would like to hear someone else’s opinion on this matter.

Answer 1

I would stick to the rule: everything that can be done without js should be done without js.

Answer 2

Disagree with those posted above. The component must be a black box. The external user does not need to know anything about its internal structure. The user of the component passes properties to it and gets a guaranteed result.
The problem with css is that if you subsequently drastically redesign the internal structure of the component, in most cases you will not be able to make the old external css rules work as they should, and for those who customized your component in this way, everything will go wrong.
By passing the parameters as properties of the component, you have full control over how they are used in the build and can easily make changes.
In this particular example, the css +- approach should not lead to problems, but in most cases the situation is different.