This might seem like a little bit of a nit picky question, but I feel it’s rather important, and I really want some clarity for this (I can’t seem to find much information about it)
Say for example we want a box that floats left, has a black background, and white text, is it better to do:
<div id="random-box">This is some content</div>
and have the CSS as:
#random-box { float: left; background-color: #000; color: #fff; }
or is it better to do:
<div class="float-left random-box">This is some content here</div>
and have the CSS as:
.float-left { float: left; }
#random-box { background-color: #000; color: #fff; }
I always reasoned that the last is better due to there being less CSS (e.g. anything that is floated left can have the class “float-left” this means you don’t have to repeat “float: left” for various different items) the only downside being that you end up with quite long CSS classes sometimes . . .
If I am right, in which cases should you use ID’s? And more importantly are there any really useful website articles that tackle this issue head on?
Or is this a case of this not mattering, and doing it either way being generally accepted as fine?
After a while, I’ve settled mostly on using OOCSS as my main philosophy when coding.
I could rabbit on, but I doubt many people will ever look at this question, and the link above provides a great starting point for questions like mine above.