18Feb

LessCss lets me express myself in CSS the way I express myself in Python

Posted by Elf Sternberg as Design, web development

I recently implemented a new subsite for IndieFlix using LessCss, the Leaner CSS metaframework. LessCss is a programming language that abstracts CSS out into a hierarchal language, where instead of writing:

#header { ... }
#header img { ... }

You write:

#header {
    ...
    img { ... }
}

Which, believe me, makes a whole lot more sense. Even better, if you’re fond of the clearfix technique, then you’ll see why I fell in love with LessCSS. I had a long sidebar object, and I realized that I needed to make it clearfix to deal with some float issues. I had .clearfix { ... } defined already in my CSS, and I had my “.social-networks” class that I wanted clearfixed. LessCSS let me write:

.social-networks {
    .clearfix;
    ...
}

And it all worked the way I expected it to, without my having to clutter up the HTML with layout hacks.

Yes, this means that there are duplicates in the CSS LessCSS actually spits out, but that shouldn’t matter, any more than you care about bitsequence duplication in a large C++ program’s object code. I tend to look down on metaframeworks; my experience with using Ruby to write Scriptaculous code, or GWT, is that unless I want to jump through strange hoops I’m limited to expressing in Javascript only what can be expressed by the writers of the Ruby or Java-based framework.  This problem is made worse by the promise of not having to learn Javascript to be expressive in it.  I call shenanigans.   The win for using any framework has to seriously overwhelm the loss of expressiveness. I don’t bemoan losing the expressiveness of assembly language when I write in Python (although if I did have a problem that needed assembly language, I’d write in ASM, build a C wrapper, and compile the thing into a Python module… because I know all three of those languages*), and the only thing I lose using LessCSS is browser hackery, which I shouldn’t be doing anyway.

The containerization of cascades is such a clear win for me that I can’t imagine going back to doing CSS by hand. Well, I can, I just wouldn’t want to.

LessCSS does not carry your CSS comments from its source file to the CSS output, so it’s inappropriate if you need browser hacks that rely on poor comment parsers (I’m looking at you, Opera) or have alternative uses for comments in CSS (such as WordPress’s style.css file does).


[*] Okay, I studied Motorola 68K assembly, which is a far cry from x86 assembly. Back in the 80’s, everyone “knew” the x86 chipset was junk and Motorola’s native multitasking cores were the future. Then Apple had to screw up using the multitasking features, Amiga and Atari blew it, Microsoft, IMB and Intel continued to chug along, and we’re left with the x86 series.

2 Responses to LessCss lets me express myself in CSS the way I express myself in Python

Chris Owen

April 2nd, 2010 at 10:54 am

Just so you know, there is a way to bring in these CSS hacks by defining them in a standard CSS file and using the @Insert syntax. i.e.

@Insert “css/mycsshacks.css”;

This will simply bring in the content from this file and add it to the css output.

N.B. This is different to the @Import syntax which will run it through the .Less preprocessor.

Chris Owen

April 2nd, 2010 at 10:56 am

Actually, strike that. The @Inset statement is (AFAIK) only available in dotless/.less which is the .NET port of the LessCSS library.

Comment Form

Subscribe to Feed

Categories

Calendar

February 2010
M T W T F S S
« Jan   Mar »
1234567
891011121314
15161718192021
22232425262728