There is another approach to get the same result. In the css, define all the things common to all boxes in one go, by separating the classes by commas. Then define the classes individually with the things that are unique to them. For example
For these boxes, I was thinking they could be in an infinite number of styles and combinations, so I decided to break things out in granular enough fashion that I wasn’t creating 100 classes that could be re-used.
If I was just going to have a red, green, and blue box, then your approach makes sense.
I’m assuming your class names in your example are just that - examples - and you don’t actually intend calling things “bckgrd-green” or “font-tahoma”, right? Because if the client suddenly decides they want a pink background with Arial, you either have to change all your classes on every page of your HTML (thus undoing one of the great benefits of CSS) or live with the confusing fact that class="bckgrd-green font-tahoma" means you have a pink background with Arial.
First, I am a programmer by design, and I always make code (e.g. PHP) as verbose as possible because I hate sticking people with crytic abbreviations that don’t even mean anything to me a month down the road! (God bless you @John_Betong!)
Second, to your example, if a client wanted pink Arial, I guess I would just go back and change the style for the box to include those new classes.
I think it is important to keep the context of my info boxes here. Yes, if I had a style called .yellow-highlight and the client wanted all important text marked in blue, that would be confusing.
But that isn’t what I am doing here. Instead I created a generic box style - which is consistent with @mawburn and then I created a “library” of independent styles separated out in a granular enough fashion that I can indeed change the font, font-color, cont-size, etc and not have to rename the entire “God class”.
If I use one of these custom boxes in 100 places in my HTML, then both @SamA74 and my approach would suffer. I would have to chase down all 100 instances in my HTML and change both font-Tahoma ==> font-Arial and color-blue ==> color-pink. But then Sam would have to deal with a class called .greenBox that is now pink!!
But that means you have to edit your HTML every time you change styles. If that style is applied to - say - a heading, you may have to change it on every single page. That’s really not a sensible way of working.
You just change the css, that’s all. That’s the whole idea of external css files. If you are mixing and matching your styling on various elements like that, you should maybe be using in-line css to define the differences, you can still have a css file with global stuff in it too.