html - Which is the best way to code CSS -


i have many blocks different sizing, padding , margin values. thought create support css classes , combine below;

css

.m-t-5 { margin-top: 5px; } .m-t-10 { margin-top: 10px; } .m-t-15 { margin-top: 15px; }  p-10 { padding: 10px; } p-15 { padding: 15px; }  .f-left { float: left; } .f-right { float: left; } 

html

<div class="m-t-5 p-20 f-left lined"></div> <div class="p-10 m-0 f-right"></div> 

by using class names becoming big(i mean in length). practice? please suggest me wether continue way or creating multiple css classes own properties.

regards.

i agree @ryan, need tricky , intelligently move around as-per layout reduce code maximum can. , avoid using (-)&(_) etc... , make simple & clean naming conventions. please see example below:

css

.mt5 {margin-top: 5px;} .pd5 {padding: 5px;} /* margin top 5 , padding 5 */ .mt5pd5 {margin-top: 5px; padding: 5px;}  .fl {float: left;} .fr {float: right;} 

html markup

<div class="fl mt5 pd5">welcome</div> <div class="fl mt5pd5">hello</div> 

Comments