I couldn't come up with a simple title that explains my problem, but I'll try to be clear.
Is this a good convention:
<div class="margin10 padding20 font28 display-block">Something...</div>
<div class="margin20 paddin30 font12 display-inline-block">Something...</div>
//CSS
.margin10{
margin:10px;
}
.margin20{
margin:20px;
}
.padding20{
padding:20;
}
.padding30{
padding:30;
}
.font28{
font-size:28px;
}
.font12{
font-size:12px;
}
.display-block{
display:block;
}
.display-inline-block{
display:block;
}
or
<div class="something-wrapper">Something...</div>
<div class="something-container">Something...</div>
//CSS
.something-wrapper{
margin:10px;
padding:20px;
font:28px;
display:block;
}
.something-container{
margin:20px;
padding:30px;
font:12px;
display:inline-block;
}
Basically the advantage of the first over the second is that I create lot of css classes following grid systems, conventions and patterns and can use them again and again in css. REUSABLE In second type I create individual css styles for individual elements where one might be usable in another but cannot be used due to naming convention.
Can someone help me on what is the best practice/industry standard here?
action-button
and then create child classesaction-button-important
,action-button-delete
oraction-button-save
(for example) to tweak individual classes.