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

side notes.

microtune basics

It is a styling principle in action, so a small number of lines from my sitewide stylesheet should do as example.

…
.lft1 {margin-top: -15px}
.lft2 {margin-top: -10px}
.lft3 {margin-top: -5px}
.lft4 {margin-top: 0px}
.lft5 {margin-top: 5px}
.lft6 {margin-top: 10px}
.lft7 {margin-top: 15px}
…

The above shows the basic 5px microtuning steps used to top-adjust elements when basic style isn't what I want. 5px steps is just about fine-grained enough for me.

Can add that basic styling of margins on images in content areas, is equal to margin:5px on medium screens. Basic margins are in fact a mixture of px and %, to optimize use of space across all screens.

microtune variations

In addition to having margins declared in px and/or em, we also have “special cases” where switching to margins declared in % makes position vary with available window-width. Here follows an example…

h1+*>h2 .lft {margin-top: -3%}
h1+*>h2 .lft1 {margin-top: -2.2%}
h1+*>h2 .lft2 {margin-top: -1.6%}

The above reads as: an element (maybe an img) contained in an H2, which is child of a container, that is following directly after an h1, will get margin-top set.

You can see the above in action on the image alongside the first headline, as it moves down with narrower window/page. Combined with max-width on the image, it also shrinks to fit better on smaller screens where there obviously is less space for it.

By also lowering the first headline an main area on the page a little, using the same microtuning system, more space is provided for the image when it is at its highest position and largest size – all prepared without touching a stylesheet.

h1+*>h2:not([class*="lrn"]) .lrt {margin-right: -3%}
h1+*>h2:not([class*="lrn"]) .lrt1 {margin-right: -2.2%}
h1+*>h2:not([class*="lrn"]) .lrt2 {margin-right: -1.6%}

In the second scenario – almost identical to the first, other (maybe default) styles will be applied if/when that specific class (.lrn) is present, as nothing has been applied here.

Usually: when margin-right values in % are not applied, margin-right falls back to values in px – IF a margin-right class is inserted. Sounds complex? Well, not to me who came up with the microtuning system.

combine microtuning

Imagine having any of the following classes…

.lrt4 {margin-right: 0px}
.lrt5 {margin-right: 5px}
.lrt6 {margin-right: 10px}

…combined with any of these…

.lrta-2 {position: relative; right: -3%}
.lrta-1 {position: relative; right: -2.4%}
.lrta {position: relative; right: -2%}

… and you can see how right position can be controlled by a fixed margin (px) and a varying relative offset (%). This is one way to overcome the lack of support for calc() in browsers, as they all support such “double-positioning”.

Now imagine what can be done when any element can be positioned and/or made to interact with its surroundings as intended, simply by adding one or more microtune classes. And, remember that elements will fall back to basic styling for its type for what I do not want to microtune in each case – microtuning is totally redundant.

expandable system

So far I have not found the need to add padding into my microtuning system. The 5px margin steps have been sufficient, but by adding four 1px padding steps for each element-side, the precision is down to 1px in most cases – where having padding doesn't pose problems.

Transparent borders in 1px steps for each of the four sides of an element, can also be used in many cases. And, both borders and paddings add functionalities, like preventing collapsing margins for instance.

So, the microtuning system can be expanded at all ends for positioning alone, if needed. And expanding microtuning into other properties/values is of course also easy enough.

The fact that I have not found a need to expand it much further beyond max-width and rough positioning, is proof enough that it works as intended, for me. It also proves that the more normally styled parts of my design work reasonably well, as everything in the microtuning system is building on it.

why not stick to conventional methods?

I will probably have a definitive answer when I write and populate the next article/page, or the one after that, or some time later. Or maybe never.

In the mean time I continue to apply microtuning whenever and wherever I feel like achieving that fine-grained control over details, simply because it works. At least being in this much control over individual elements, alleviates boredom to some degree.

I use microtuning on just about every page, but hardly ever the same combinations. Thus, there is nothing to gain by collecting the most often used properties/values and put them under regular classes.

So far every attempt to rationalize microtuning styles out of my stylesheets, has ended in much heavier stylesheets, and lost control on the detailed level covered by microtuning styles. I have given up.