CSS peppers his daily routine with studying his favourite subject matter: HTML Elements.  The Elements are a curious set of creatures to CSS, and nowhere is this curiosity more evident than in CSS’s regular [and published I might add] fashion reports on his subject matter. Reading like the annals of an Ethnographer, CSS describes what it was like when he first encountered The Elements…

“[...] The Elements arrange themselves in similar and yet strange-fitting uniforms, some of the uniforms stretch rather badly over the more robust figures (such as the fat one I call ‘Textarea’) and yet they continue to wear these uniforms day by day.  [I must do something to avert this fashion crisis - it's a g'damn tragedy!]“

Before CSS set about clothing The Elements in the latest trendy garb, he decided to investigate why The Elements were wearing those strange uniforms in the first place. CSS needed to witness the birth and early life of an Element. His findings were logged as such:

“[...] These elements all start out in life as simple naked objects, never trying to distinguish themselves from their peers. [They look so boring, so same-y!] Early in their lives, these elements are visited by the clothes merchants (for some reason called ‘Browsers’) and they dress the elements in various lines of fashion (at a price).  These merchants have their own style guidelines for the various elements, and curiously, each merchant’s style guideline shows very little difference from the next. [Maybe all the merchants got together one day and agreed upon how they'd style these Elements.  Must investigate further.]“

CSS went about correcting the bland fashion mistakes perpetuated by the Browsers, setting new life into The Elements. Can you picture CSS flitting about, his paintbrush splurging a spectrum of colour over his new creations?
Some of these creations were boxy, intended for the ones he called Div, Pee and so.
Other creations took on a more fluid nature, a special ocean blue one intended for the charismatic Anchor element was weaved and it was gorgeous!

One day, as CSS recalls, something strange happened:

“[...] Span, that loose character, came in to my shop asking for a change of clothes again, as he usually does. [He's always changing his mind about what he wears, it's so irritating!] I was absorbed in my latest creation, so I motioned for Span to have a look around.
‘Waddayathink?’ I heard a little later; there was Span dressed to the nines, looking just like that handsome devil: H1.
I couldn’t believe it at first.  How did Span fill out into H1′s figure?”

It was a revelation – the impact would be profound!
It was then that CSS realised he had made a huge mistake…

“I had been stupidly using the Merchant’s (or Browsers) clothes as a base for all my own creations as if they were boxy underpants.  In a way, I was inheriting their forms, their textures.  I can’t believe I didn’t realise that all these Elements are amourphous – I can style them as I see fit! (within reason ofc)”

With the limits removed, CSS became an even more talented designer.
A flowing robe was weaved with love and dedication for Pee.
Anchor took on new heights and stature with his new box-cut jeans.
In short, CSS transcended fashion design and his impact on the fashion world have indeed been profound.

CSS’s works have set the bar for all aspiring designers, even to this day. His reports formed the basis for all studies in fashion design.
Meeting CSS in person is a rare treat for younger designers.  ”Don’t forget…”, he would say to them, “an element is an element is an element.  Dress them as you see fit, not by what they’re fitting into.”

CSS Reset

Eric Meyer is one of the original Web Standards Gurus. His work is good, and pure, and great time savers for us minions. Case in point: Eric’s work on reset.css.

What reset.css essentially does is set a common foundation in all browsers by removing the browser’s default rendering of HTML elements.  This makes it easier to author a web document so that it can look very similar in each separate browser.

The problem

I’ve been happily using reset.css on many projects, never noticing along the way the time I’ve spent on redefining margins on <ul> and <p> elements – time that could have been saved by defining a ‘Sensible Default‘.

Here’s an example…

ul {margin:0; padding:0; list-style:none; /*etc*/}

Reset.css would set all Unordered-Lists (<ul>) to have no margins, and no list-style.  This was great for defining semantic menus in the navigation and footer blocks, but…
the rule would cascade! (DUH!) and each time I wanted to have default rendering of a <ul> I’d have to define it explicitly. This situation would be exacerbated for each case when an <ul> needed to be displayed as expected, e.g. in a sidebar:

#sidebar ul {margin:1em 0 1em 2em; list-style:disc;}

The situation

I started working with Christo on a Django web-app, where I basically had to handle the templates, HTML and CSS + Supporting Images. I was using reset.css as normal.
Christo started voicing his frustrations with having to rely on me to define each and every case where a paragraph was needing margins, or an unordered-list was missing its bullets. It came down to a point where he asked me to remove reset.css. My Standards Zeal kicked in and I refused it, saying I’d have to create more exceptions than the rule by not using reset.css.
It ended up in a stalemate, so I thought I’d open up the dialogue to the StackOverflow audience. I put together a quick question and waited 24 hours for the answers to roll in.

Enter: Sensible Defaults

It turns out that the practice of defining Sensible Defaults is a common Programming tip. (This just goes to show my lack of formal programming experience!) Defaults can save a lot of headaches, and this situation of mine was no different.

The solution

Christo and I met half way by overriding the Reset rules just for the content area.

#content ul {margin:1em 0 1em 2em; list-style:disc;}
#content p {margin:1em 0;}
/* etc */

This way I could rely on Reset.css to ease the styling of header and footer elements, and then reset the reset by providing default styling to any content items such as paragraphs and unordered-lists.

TLDR? A warning as a conclusion

So, if you want to use reset.css then please, do The Right Thing™:

• Don’t be an idiot and implement something without understanding it
• Define sensible defaults for where they’re needed.

That is all.

I’m not going to go into detail about it’s function, but what I will do is give a review, highlight its pros and cons and maybe even offer some mixins you can use.

Setting up

Installing LESS.app was a breeze, and being familiar with installing Ruby Gems, the command-line app LESSCSS was also swiftly installed.
My initial reasons for using LESS was to use the Mixin functionality, and create a library of common mixins I tend to use on each project. I was hoping that I could store this ‘common library’ in a central place and reference it from all my projects – this was not the case, as all LESS imports have to be sourced from the same folder.

Pros and Cons

In these 2 weeks of using LESS, I’ve noticed a few limitations – they’re not deal-breakers, but then I haven’t used LESS in a team-environment yet.

Pros:

• LESS Syntax is very similar to CSS, which makes it easier to use than SASS.
• Storing your common mixins in a separate file speeds up development on subsequent projects
• Non-invasive file monitoring means your LESS files are compiled as you save them.  No need for compiling manually.

Cons:

• No support as yet for some dynamic mixins that use proprietary properties such as Microsoft’s alpha(opacity) property
• Multiple comma-separated ancestral selectors are converted into multiple selectors, dropping the comma in the selector and repeating the rule each time over.
• Larger, more numerous imports and more complex LESS files take longer to compile.  I find I’m often refreshing my browser twice because I refreshed before the CSS was compiled.

Talking of a team-environment… everyone who touches the CSS would have to use LESS, else there’ll be some crazy merging going on when someone updates the CSS and not the source LESS files.

All that said, I’d recommend using LESS to anyone who’s working on their CSS independently.

Further exploration

The compiling side of LESS CSS must  surely be able to minify the output!  At the moment it dumps each property on a new line, leading to horrendously long CSS files with lots of whitespace.  (I’m a big fan of multiple properties per line for each selector)  I’ll see what I can find in terms of lessc options, but for now it’s not a big issue.

Momentum

After I subscribed to the LESSCSS Google Group and read through a few of the discussions, I noticed that there seems to be some momentum in the project, but not a lot.  There are plenty of new users asking questions, but not a lot of active developer feedback. (Probably because cloudhead is working on LESS.js at the moment)  Maybe that’s a call for more community involvement in the app.  If you’ve done work on Ruby gems before, why not get involved with LESS on GitHub?

As promised…

…some mixins I use already:

Cross-browser border-radius, still no IE support though

.border-radius (@radius:5px) {border-radius:@radius; -moz-border-radius:@radius; -webkit-border-radius:@radius;}
.border-radius-top-left (@radius:5px) {border-radius-top-left:@radius; -moz-border-radius-topleft:@radius; -webkit-border-top-left-radius:@radius; }
.border-radius-top-right (@radius:5px) {border-radius-top-right:@radius; -moz-border-radius-topright:@radius; -webkit-border-top-right-radius:@radius;}
.border-radius-bottom-left (@radius:5px) {border-radius-bottom-left:@radius; -moz-border-radius-bottomleft:@radius; -webkit-border-bottom-left-radius:@radius;}
.border-radius-bottom-right (@radius:5px) {border-radius-bottom-right:@radius; -moz-border-radius-bottomright:@radius; -webkit-border-bottom-right-radius:@radius;}

IE 6 & 7 hack to support min-height

.ie_min-height (@height:300px) {height:auto !important; height:@height;}

Malarkey Image Replacement

.mir () {text-indent:-1000em; letter-spacing:-1000em; overflow:hidden;}

‘Off-left’ screen-reader supporting layer hiding

.off_left () {display:block; position:absolute; top:0; left:-9999em;}

Cross-browser Opacity – Missing IE filters: not supported in LESS yet.

.opacity (@opacity_percent:50) {-moz-opacity:@opacity_percent / 100; opacity:@opacity_percent / 100;}

Self-clearing for Non-IE browsers: Apply to :after the float container

.self_clearing () {content:"."; display:block; clear:left; visibility:hidden; height:0; width:0;}