CSS resets rediscovered

It was back in January of this year that the idea for FSSFive — a WordPress theme built on/with Fluid Skinning System (FSS) as a foundation to allow components of Fluid’s Infusion to make the most popular blogging platform on the internet (more) accessible — was born. Or that was the goal. The jury is still out on my effort, which isn’t by any means complete. It was then attitudes concerning deeply engrained personal habits started to be scrutinized. Namely the use of Cascading Style Sheet (CSS) browser resets in my design process.

Essentially all CSS browser resets are, is a bunch of lines of computer code usually inserted at the beginning of the file that handles a webpage’s (or more commonly a website’s) presentation information. And it’s these rules, if you will, that serve to put different web browsers at an equalled point where a designer can start designing from. Because every web browser handles their default inheritance, sizing and spacing issues a bit differently. And it’s this useful technique that puts everything “back” in it’s place. In a consistent manner. Across web browsers.

But as I started to develop FSSFive my thinking began to change. For years I become quite comfortable, meaning I no longer thought at any length about this issue, and used the popular Meyer Reset. Which isn’t a bad thing (this isn’t a criticism of Eric’s “tool,” in fact it is praise, it served me remarkably well for over 5 years!). I just threw it in at the start of any project, as a first step, and “designed” from there without a second thought.

And this is where the not thinking bit kinda bit me on the bum. Especially in terms of efficiency. Where the Eric’s tool “reset” the elements I needed reset on my pages, taking out a feildset border or the default list-style bullets in lists for example, I’d merely redefine those styles further down in my style sheet (taking advantage of the cascade, cos the rules written later in a CSS style sheet override the one’s written earlier) when/if I needed them. As opposed to tweaking the reset to allow what I wanted/needed to show through. (To be fair Eric states very openly his reset wasn’t/isn’t meant to be an absolute solution, it was all me who quite lazily treated it as such.)

So I began my “rediscovery” with the notion, especially since people now consume content on the web in many more places than in the browser (“Bookmarklet apps like Instapaper and Readability [for example] point to a future where content is no longer stuck in websites” — Orbital Content), to shrug off most of my base instincts as a designer and give up my need to have everything in it’s place. And I’m not talking about rendering differences between browsers — something I well understand, accept and weirdly welcome. I’m talking about this need for resets, period. In fact, earlier versions of FSSFive had the bare minimum of styles that serving as a reset. A zeroed out body margin and padding, and possibly a couple additional rules. That was it.

But my thinking came to a head after reading Harry Roberts’ Reset Restarted. A light suddenly switched on. And the way I saw CSS’s role, and the manner in which I would start to write my style sheets, began to change. Mind you it was nothing terribly revolutionary, in the juggernaut that is the web design industry I mean, but personally this was yet another reawakening. I’m convinced; resets do need to be handled with care. And customized for the reason they’re being used.

But as I started to play around with Harry’s “restart” (I prefer his terminology, by the way) I started to see certain results, meaning different than I was accustomed. Again this was in no way a bad thing. It got me thinking. (For the record, Harry also contends that his restart isn’t meant to be a be all and end all solution to this, or any, issue. Everything is relative.)

The links in his restart had their underlines removed. I understand his reasoning (posted sometime before “Reset Restarted,” under the heading “underlines are intrusive”). I even agree with him, to a point. Especially concerning his more general “moan,” being a distaste for “negative hovers.” But his point concerning accessibility is extremely valid and most worthy of mention here;

There is only one issue I can think of, specifically when starting [links] off non-underlined; accessibility. Colour blind users may not necessarily be able to distinguish a link based on colour alone. Try and use a decent contrasting colour to avoid this…

So much so, in fact, I think colour alone isn’t enough of a signifier that hyperlinked text behaves differently than other non-linked text. Agreed. Link underlines, in their default state (hugging the text so close to the baseline) at least, are less than flattering. They are awkward (read: difficult) to read. But…

All this has inspired me to experiment a bit for my next post…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.