best way to write CSS [closed]

Question

Hi am creating a website, I am a bit confused about how to write CSS.. I want to whether I should used different classes for same style of should I make style specific class and used them every where... let me use an example...

suppose I want to give a min height, should I use this:

.div1,.div2,.div3{min-height:335px;} 

and use HTML like this:

<div class="div1">afads</div>
<div class="div2">fads</div>
<div class="div3">fads</div>

or should I do it like this: CSS:

.minheightstyle{min-height:225px;}
.leftitems{float:left;}
.red{background-color:red;}
.blue{background-color:blue;}
.grey{background-color:grey;}

HTML:

<div class="minheightstyle leftitems red">my text in red bg</div>
<div class="minheightstyle leftitems blue">my text in blue bg</div>
<div class="minheightstyle leftitems grey">my text in grey bg</div>

which way is the best way to optimized way and which one should i use, does it matter.

Answer 1

I would do neither. I wouldn't do the first, because that's what classes are for if elements have the same styles.

I wouldn't do the latter because that defeats the purpose of styles if you are going to make custom classes for every style item. Consider the following:

<div class="font-size color margin text padding float-left">some div</div>

In the above it comes scary close to just using inline CSS. To change the look of the above you would need to change the actual HTML instead of simply the class.

I would rather create a generic class e.g. article with the styling of an article instead of saying class="font-verdana margin color" etc. Maybe for the color you might have a point because you want to use different colors for the three div but in general those three divs should have the same class.