T
T
tdtdtd2020-10-01 17:48:08
css
tdtdtd, 2020-10-01 17:48:08

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

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

zr1ehD4.png

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 the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexey Yarkov, 2020-10-01
@yarkov Vue.js

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

A
Aetae, 2020-10-04
@Aetae

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question