Answer the question
In order to leave comments, you need to log in
Change styling of a vue component with props or css variables?
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'
}
}
}"
/>
<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;
}
}
Answer the question
In order to leave comments, you need to log in
I would stick to the rule: everything that can be done without js should be done without js.
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 questionAsk a Question
731 491 924 answers to any question