November 16, 2012

So yesterday I tried to integrate a comment system to my journal posts and what I found was a nice script from IntenseDebate that can be included where the comments should appear.

Everything worked fine, until I needed to customize that thing to fit to the current style of my web site.

IntenseDebate supports the customization of their CSS and so I got down into Chrome's DOM and looked at every small detail I found that does not match the style and look of the website.

Deeper and deeper down the rabbit hole a pattern emerged. To completely adjust their CSS rules to the design I wanted, most of my changes were actually reverting or invalidating the CSS definitions they've made:

Lot's of lines I've added, were similar to:

font: inherit;
font-size: inherit;

Now I can imagine a few reasons for setting the text to a fixed font family and to a fixed size on their side: when larger fonts may break the layout, for example. But except their styled buttons, all their code layouts just fine in the browsers I tested it with. So I don't have any idea why they used fixed font sizes and fonts all over the place.

I assume that this is just one example of overspecification.

In case of CSS it is quite simple to use a relative font-size, for example. There are relative values like "smaller", or percentage values, but in other markup or programming languages, you need to get very creative to avoid overspecifing code.

Another example of overspecification I found today - and that was why I decided to write about it - was in a plugin for Joomla:

I recognized that our Disqus comments were note working on one of my product sites when it was accessed via HTTPS. Most likely such problems are caused by the same origin policy. And indeed, a quick look into Chrome's console showed that some scripts were blocked because of an attempt to load them via the unencrypted HTTP protocol.

The fix was simple. I just removed the http: from the URLs that loaded to scripts. Protocol Relative URLs should work correctly in every current browser, so there is no reason to ignore them for loading scripts or CSS anymore.

Now what can we learn from this? Is overspecification really that bad? Sometimes maybe ... and how can it be detected, and how can we get aware of code or markup that is overspecified?

From what I know for sure is that avoiding overspecification, even though it introduces an operational dependency to its relative counterpart, simplifies the (re)usability of the component that needs to be embedded in another system.

That brings me to the point, that whenever you encounter anything that is absolute in the markup or code you are building, I suggest to think about how that piece relates to its environment and if it could be specified in a way that is relative to what's already existing.