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 class
es 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” class
es, and also at least
that many “float images right” class
es, 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, class
es that add to and/or override basic element styling.
Easy to remember, include and change to taste, and these “microtuning”
class
es 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/class
es 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
class
es 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 class
es in the usual way to apply styles with. In Atomic
class
es 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
class
es. 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
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