html - Create Smart Utility Padding and Margin classes with LESS? -

html - Create Smart Utility Padding and Margin classes with LESS? -

i sense there way create set of smarter utility classes have can add together class <div class="margin-top-6"> tag within html , less able run , apply css rule add together 6px of margin top of element.

is possible?

i'm huge believer in working smarter not harder right have crazy clunky , feels smarter little bit more less knowledge.

so wanted know if there better. here sampling of padding part of have. total code repeated below 25px of each class set, great have limit flexible setup. thinking variables or mixins or have less rule looking .padding-@var1-@var2, check if vars nowadays , if so, they, then...etc.

less .padding { &-1 { padding: 1px !important; } &-2 { padding: 2px !important; } &-3 { padding: 3px !important; } &-... &-height-1 { padding-top: 1px !important; padding-bottom: 1px !important; } &-height-2 { padding-top: 2px !important; padding-bottom: 2px !important; } &-height-3 { padding-top: 3px !important; padding-bottom: 3px !important; } &-... &-top-1 { padding-top: 1px !important; } &-top-2 { padding-top: 2px !important; } &-top-3 { padding-top: 3px !important; } &-... &-bottom-1 { padding-bottom: 1px !important; } &-bottom-2 { padding-bottom: 2px !important; } &-bottom-3 { padding-bottom: 3px !important; } &-... &-width-1 { padding-right: 1px !important; padding-left: 1px !important; } &-width-2 { padding-right: 2px !important; padding-left: 2px !important; } &-width-3 { padding-right: 3px !important; padding-left: 3px !important; } &-... &-right-1 { padding-right: 1px !important; } &-right-2 { padding-right: 2px !important; } &-right-3 { padding-right: 3px !important; } &-... &-left-1 { padding-left: 1px !important; } &-left-2 { padding-left: 2px !important; } &-left-3 { padding-left: 3px !important; } &-... } html use: <div class="listitem margin-top-6 padding-width-14"> ...content here... </div>

any ideas?

thank much time , thoughts on everyone!

sorry break working harder not smarter.

why go through problem of generating plethora of css classes create micro adjustments box model of element? utilize built-in feature of html: style attribute.

instead of:

<div class="listitem margin-top-6 padding-width-14"> ...content here... </div>

you can do:

<div class="listitem" style="margin-top: 6px; padding: 0 14px;"> ...content here... </div>

...and not have generate magical classes.

if want work smarter, can move these kind of micro-adjustments css file, attaching them meaningful class name:

<div class="listitem listitem-special"> ...content here... </div>

then, can utilize powerfulness of less (ie. parametric mixins) shorten css need write:

.listitem-special { .padding-width(4); margin-top:6px; }

and here's mix-in used above:

.padding-width(@width){ padding-left: (@width)px; padding-right: (@width)px; }

having styles abstracted class name listitem-special lets re-use styles multiple places in markup. furthermore, when have need alter styles listitem-special across site, need update css definition of class!

it's considered best practice have styles separate markup. there lots of resources on topic. here's 1 smashing magazine.

html css less