Kevin Powell - Community•7mo ago

Are CSS Variables Bad?

I'm a solo developer, so there's lots of "industry standard" / "common sense" stuff that I don't know, and, sometimes my work will have me prop up some PHP COTS software, and it seems like every time I dig into the code of other people's projects, I never see CSS variables; I feel like the only time I see them is in "cutting edge" companies or huge sites with their own css frameworks. For example, right now I'm tweaking an Omeka installation, and they have a few settings the user can use to set background color, brand color, etc -- and then in the PHP, they assign these values directly. In the equivalent of "index.php" they have this:

<?php if ($buttonColor = $this->themeSetting('button_color')): ?>
button,
.button,
.yellow.button,
[type="submit"],
.toc-block > ul > li {
    background-color: <?php echo $buttonColor; ?>
}
table tr {
    background-color: <?php echo $this->RgbaColor($buttonColor); ?>;
}
<?php endif; ?>

<?php if ($buttonColor = $this->themeSetting('button_color')): ?>
button,
.button,
.yellow.button,
[type="submit"],
.toc-block > ul > li {
    background-color: <?php echo $buttonColor; ?>
}
table tr {
    background-color: <?php echo $this->RgbaColor($buttonColor); ?>;
}
<?php endif; ?>

Like, if it were me, I would have all the css off in the *.css files, and then in index.php, do something like

body {
--button-color: <?php echo $this->RgbaColor($buttonColor); ?>;
--bg-color: <?php echo $this->RgbaColor($backgroundColor); ?>;
(...etc...)
}

body {
--button-color: <?php echo $this->RgbaColor($buttonColor); ?>;
--bg-color: <?php echo $this->RgbaColor($backgroundColor); ?>;
(...etc...)
}

Is that just me overcomplicating things? or are CSS variables problematic somehow? I've seen this on websites all over the place, hard coding #fff everywhere... Is this just dev laziness or is there a reason to avoid css variables? I use them all the time -- I have like 30 or so that I carry from project to project to retain a "job.css" file I can just copy over every time. Now I'm afraid I'm doing something wrong. Is there something I don't know?

5 Replies

Tirius•7mo ago

You definitely shouldn't be afraid to use them. CSS Variables are great, and can do most of the job that CSS preprocessor do. They also give easy ability to override styles of module/plugins/components if they are using them. They are super handly for theming. Idealy I try to use both, Less(CSS preprocessor) variables for static part and CSS variables for dynamic part. You probably can use PHP instead of CSS preprocessor if you comfortable with it, but you still want to minimize your CSS somehow..

Jeremy ParkerOP•7mo ago

That's good enough confirmation for me -- that was my assumption, but I was starting to feel like the zoolander 'am i taking crazy pills' meme... I won't name & shame, but there's one website I go to kind of frequently that has like 15 shades of almost the same color of "gray so light it's almost white but not exactly" and like I want them to hire me so I can clean up their colors and then quit....

ἔρως•7mo ago

every time I dig into the code of other people's projects, I never see CSS variables; I feel like the only time I see them is in "cutting edge" companies or huge sites with their own css frameworks.

well, most either use css-in-js solutions, tailwind or use a css preprocessor like less, stylus or sass, which have their own syntax for variables it's not always the case, like E.g.: wordpress but seriously, it's fine to use css variables, there's nothing wrong with that

Kevin Powell•7mo ago

I was starting to feel like the zoolander 'am i taking crazy pills' meme...

😆 Like @ἔρως said, often they'll be another process going on, like Sass/Less, or some CSS-in-JS, where they are using variables, but in the final output CSS, it's just hardcoded values, so you don't see it. And most developers are bad at CSS, or at the very least, very behind in modern CSS... so it can come down to laziness, lack of a proper system in place, bad practice, and a lot more... and yes, I think CSS variables > CSS-in-PHP 😅

ἔρως•7mo ago

oh, yeah, using those css variables in a proper css file would make it a very interesting system that allows you to change the colors dynamically i can imagine the 2nd example being in the html, and the css use those with defaults

Gaming

Programming

Are CSS Variables Bad?