CSS custom properties overuse?

Hi all,

I created this gist to explain the situation: CSS Custom Properties

This is copied from the CSS of a new BSS Design.

My question is regarding the use of the –bs-text-opacity property over and over in all the blocks, where the property is only used once inside each block. I’m trying to understand whether there is an advantage to doing it this way, rather than using the value literal.

Maybe it has to do with the scope of those custom properties?


I’m going to assume that is probably the default Bootstrap code and if so that’s why it’s like that in BSS. BSS is built to use Boostrap Framework and pretty much mimicks it to the best that it can. If Bootstrap is using it that way, then this app will too. I’m sure you’ll find a lot of things like that but … suffice it today that:

In most scenarios a person isn’t going to use “all” and many times even more than 1 of those classes, so the need for it to be there would be most likely to make sure that the attribute is present no matter which way you use it. You’re more than welcome to rewrite the default CSS (well probably Sass) to combine and remove redundant, overused and unused classes. For the small amount of issues that it causes, most don’t bother though lol.

As @jo-r said it is part of the bootstrap framework, I think it changed in bs5.1 where they changed to rgba.

Thanks for the replies.

Since I’m fairly “new” to web technologies (I did some in early 2000’s, but things have evolved quite a bit since), I’m trying to understand the “patterns” rather than the specifics.

One thing for sure is that I still need to properly dissociate Bootstrap from Bootstrap Studio. Since the templates I’m using are the ones coming with BSS, I assume, maybe wrongly, that they are somehow “vetted”, or at least tailored to suit BSS’ workflows.

I’m trying to better understand CSS Custom Properties, and at the same time trying to understand Bootstrap… it keeps me busy :grin: