Lukewh's tumblr

Jonny Haynes: Some quick thoughts on LESS, SASS and other 'CSS Extenders'

OH MAH GAH, AH HAVE MORE!?

Indeed
After publishing my earlier post I had a short discussion with @jonathantweed, which helped remind me of another reason why I thought compiling was bad - multiple dev environments.
I’m sure there are ways around the problem, but in a rapid development situation it was quite an ask for all the devs to compile the css or have a compiler watching files in the background… Minor I know.

RE Jonnys post (included below)
Like Jonny I’m also a OOCSS advocate (though I do tend to bend the rules a little) and while I agree OOCSS comes close to mixing content and layout I find more holes in the LESS approach.

If Jonny had gone with the OOCSS approach he would have:
p {}
.red { color: #ff000; }
.font-16 { font-size: 16px; }
.black-fill { background-color: #000; }

The LESS example (if not compiled by Javascript - we both agree javascript compilation is less then ideal) would create:
p {
color: #ff0000;
font-size: 16px; 
background-color: #000;
}

All p’s would have this styling (though I don’t think Jonny really would add it to an element, it’s just an example), but that compilation just makes me think - why not write it like that in the first place? Combine those three OOCSS styles together into a larger more useful CSS Object? I know the variables and mixins of LESS can help you code it faster, but I’ll get onto that in a minute.

The way I may write it from the get go (to bring it closer with how I use OOCSS) would be:
.red-16-blackBack {
color: #ff0000;
font-size: 16px;
background-color: #000;
}

I think the CSS spec can learn from LESS’ use of variables, but for the time being I don’t have a problem with Find & Replace. I haven’t seen any evidence to suggest LESS makes your CSS files any smaller or efficient for the end user, it just gives the CSSer more to think about and keep track of. For example I, and my colleagues know that border-radius: 5px; will give us rounded corners of 5 pixels but unless we take time to set out some rules on naming etc. we might not know whether Dave set up @borderRadius5 .border-radius5, or .border-radius(5), ‘uh-oh he didn’t, I’ll set it up then’… ‘ooooh he called it .rounded-corners(5)’. I understand it’s a very minor point, but in the heat of a client battle when they want the top right hand corner of that specific div a little bit more curvaceous within the next minute, border-radius: ; does the trick every time… You don’t even have to compile it to push it live.

After all the ranting I do still think I’m waiting for the curtains to open so I can see LESS in the same light almost everyone else does, but every time I try to peak through, a net curtain provide a haze of doubt so I close the curtains and hit ⌘+f.

jonnyhaynes:

I got into a discussion with lukewh on Twitter about Less.css after I asked people’s thoughs on it.

Having done quite a bit of research over the last few days into Less.css and other ‘CSS extenders’ as Luke called them, I thought I’d add to the discussion …

I, like some of my colleagues we…

(Source: lukewh)