CSS microtuning

…promotes design freedom

I literally love to introduce minor variations as I write new pages. At the same time I hate having to modify existing styles to be able to do that, knowing all too well that those changes will affect more or less all pages on site.

As number of pages grow, any modifications to existing styles will have greater implications. The larger the site, the worse the cross-site effects caused by even minor changes to styles used in content areas may be.

I do make sitewide changes now and then, or fix one or more of my many “designer bugs” when I become aware of them. Such modifications on the macro-level rarely ever cause problems, and if they do it usually becomes apparent right away and can be dealt with.

What I want is flexibility on the micro-level in how content-elements are aligned in relation to each other on individual pages, without having to open stylesheets. This is where “microtuning” comes in, providing me with tens of thousand of minute variations in the form of a small number of short and static lines of code in the stylesheets behind this site.

Of course I have used microtuning before, on other sites, but not to the degree I use it on this site.

microtuning = detailed styling

Just look at all the short classes applied to an image, floating left…

<img class="fll mw-6 lft1 bup3 ssrmw" 
   src="../imagefolders/att-2011/isgc-4.jpg" alt="" />

/* large screens/devices */	 
img.fll {float: left; margin: 4px 2% 1px .2%; clear: both}
.mw-6 {max-width: 60%}
.lft1 {margin-top: -15px}
.bup3 {margin-bottom: -5px}

/* small screens/devices */
@media screen and (max-device-width:480px), 
   screen and (max-width:480px) {
.ssrmw {max-width: 100%; float: none; margin: auto}

I can imagine that some lovers of “pure and efficient HTML/CSS” are mumbling “CLASS'itis” by now, as all that code can easily be attached to one, single, class.

Of course it can, but then I would need at least a few hundred specific “float images left” classes, and also at least that many “float images right” classes, defined in my stylesheets to fulfill my basic needs for variations. Not to mention all the other elements that should float left or right and/or align in various ways on various pages.

In short: if I relied on “more efficient” coding, my already quite large stylesheets would end up being many times larger, and I would have a ton of different class names for basically the same thing with minor differences, to keep track of while planning and writing new articles.
No thanks!

The “microtuning” system to the rescue, with a small number of margin, padding, max-width and more, classes that add to and/or override basic element styling. Easy to remember, include and change to taste, and these “microtuning” classes can be left out when basic element styling does the job as intended on its own – as often is the case.

As example, see the available “microtuning” alternatives for max-width I have included in my sitewide stylesheets…

/* basic image styling */
img {max-width: 100%}
p img[src$=".jpg"].flr {max-width: 101.5%}

/* microtuning */
.mw-15 {max-width: 15%}
.mw-2 {max-width: 20%}
.mw-25 {max-width: 25%}
.mw-3 {max-width: 30%}
.mw-35 {max-width: 35%}
.mw-4 {max-width: 40%}
.mw-5 {max-width: 50%}
.mw-6 {max-width: 60%}
.mw-7 {max-width: 70%}
.mw-8 {max-width: 80%}
.mw-9 {max-width: 90%}
.mw-93 {max-width: 93%}
.mw-95 {max-width: 95%}
.mw-97 {max-width: 97%}
.mw-98 {max-width: 98%}

Those class names are definitely easy to remember and apply, they don't take up much space in stylesheets, and enough values are included to cover 99% of all cases I can come up with on my site.

recycle and reuse

As microtuning styles/classes for the most part are totally element-agnostic, they can in principle be applied to any element. Thus, I make plenty use of microtuning to achieve desired visual alignments and effects at will as new ideas pop up, before deciding if new use of elements will become a “norm” that requires completely new styling.

If I want to trim an image, a headline, a paragraph or a container, I just do it. Elements align the way I want as I write, without me having to open the stylesheet every time a deviation from default styles is needed.

My microtune styles never change (much) or disappear, they are static in a sense. New microtune styles are just added to new classes in the microtune naming system whenever something is missing in the library, which happens less and less frequent – the library is almost complete.

No risk of messing up pages written years ago based on the same stylesheets, as all microtune styles used on them are there, same as the day those older pages were written.

The first/​oldest stylesheet behind this site was initiated 21.january.2011, and within a week the basic set of microtune styles were written into it. Today the microtune library has grown to many times the original size, but it is a much smaller part of the sitewide style-set now than it was to begin with.

balanced approach

My “microtuning” approach to flexible styling, seems to have some similarities* with the atomic approach. Not surprising really, as Thierry and I both build on methods used by many a decade or more ago. They worked well then, and when used right they work equally well today.

*microtuning vs atomic
I use classes in the usual way to apply styles with. In Atomic classes are used to build style-sets with. So, while Thierry's method efficiently reduces stylesheet-size down to (only) what is necessary, my method uses compact sets of single-property styles to reduce the number of case-by-case whole-element styling needed to begin with.
Needless to say: my stylesheets will always be larger…

It is all in the balance between new overall styling with long and complex selector chains, and old more direct and detailed styling based on classes. I love having options available at all times, and that's exactly what my microtuning system provides. Those who don't need such options may simply leave them out, which I do too most of the time.

And to have mentioned it: whenever I am presented with a choice between what “experts” say and what works best in User Agents, I always fall down on the latter. My stand has served me well over the years, and I see no reason to change.

sincerely  georg; sign

Hageland 19.feb.2014
14.mar.2014 - minor revision
29.mar.2014 - added link to "destructive web design" page. Added two paragraphs. Fixed some typos.
24.sep.2016 - added clarification to microtuning vs atomic.
last rev: 24.sep.2016

www.gunlaug.com advice upgrade advice upgrade navigation