I am trying to write the HTML and CSS for an internal webapp properly. As much as technically possible, I want the HTML markup to define the content of the page and be completely independent of what the layout will need to be.
Obviously it is not possible to do this perfectly. I die a little inside every time I have to add an extra nested div for the sole purpose of making the layout work.
The most recent problem I have been trying to tackle is how to reduce the amount of duplicated text in my .css file. The main thing is colors. All throughout my app I use colors to represent ‘clean’, ‘errors’, ‘warnings’, and ‘pardoned’ and so far pretty much every place that uses the colors needs to have them explicitly defined. Sometimes they are used for text colors, sometimes background colors, sometimes border colors.
Is there a way to assign a value such as a color to a name, and then reference that name in the CSS properties?
I am aware of how inheritance works in CSS and I am aware that one method of accomplishing this goal would be to use multiple class names on a lot of my elements and then I could just have backgroundClean be a style that all sorts of objects use. But that requires making the HTML aware of more data that is only relevant to the stylistic layout of the page and not the data, which as I mentioned I would like to avoid.
Bonus Question: What is the best practice for doing this kind of stuff? Am I stupid in trying to make HTML+CSS act like an MVC when it is not ready to do so? I know that is the direction CSS has always been headed but perhaps it’s just not there yet.
Why yes, there are newly introduced css variables to do this!
Unfortunetly… it’s not made its way into browsers yet, so you can’t use them, just yet.
To get the same behavior, you’ll need to use some sort of Server-Side language to output the color dynamically into your CSS files. (You could also use a ton of javascript, but that’d be horrible)
So in PHP you could do this: