Imagine that I have a complex component like a dropdown menu and I want it to have some custom styles when I use it in different places. Not only colors, but spacing and icons too.
If I'm using something like react, or vue, I could pass parameters to the props.
We can also use only scss, and there are a lot of ways of overwriting the styles:
.dropdown{
width: 100px
}
//overwrite for my custom menu
.my-custom-menu{
.dropdown{
width: 120px;
}
}
Or if using something like BEM, I could even make the main class name a variable and change it:
.dropdown{
&__container{
width: 100px;
}
}
//custom
.other-dropdown{
&__container{
width: 120px;
}
}
What is the best way? Are there other ways of doing this?
Make your component re-usable. You just add style for modifed states or context like dark, light big, small** etc.
.dropdown{
&__container{
width: 100px;
}
}
//custom
.dropdown{
&.dark {
color: dark;
}
&.light {
color: white;
}
}
And this is work for all components so far.
you had:
--dropdown
--dropdown__container
--container-small
--container-big