Jeremy Parker Posts - Answer Overflow

Jeremy Parker

•Created by Jeremy Parker on 6/17/2024 in #front-end

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?

10 replies

Gaming

Programming