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
Post a Comment