Did you know that 56% of web designers declare float more than 10 times in a single stylesheet? In November 2010 an article by Nicole Sullivan the worst offender had declared in 733 times. Why? Even if object-orientated coding isn’t for you, you should be using resuseable CSS (or aiming towards it). Declare your class once and then extend and reuse it.
But why not take things one step further? At least once, at least to give it a go. Step out of your comfort zone and see if the shoe fits (and so on, and so forth). Give Object Oriented CSS (OOCSS) a go. And OCCSS is just one of many frameworks out there! There’s SASS (Syntactically Awesome Stylesheets) and LESS too.
How to Use LESS CSS
Currently I’m experimenting with LESS – compatible with IE6+, Webkit and Firefox, because you don’t need Ruby and it’s said to be up to 40 times faster. That said, it does rely on Javascript being enabled client side – but so does jQuery, and loads of people use that.
How to Use it Client-Side
Could be simpler, just include your .less stylesheet (make sure you include it before the javascript):
<link rel="stylesheet/less" href="styles.less" type="text/css" />
And the LESS javascript:
<script src="less.js" type="text/javascript"></script>
LESS Variables
If you’re familiar with anything like PHP or Javascript, declaring variables shouldn’t be a shock to the system.
@dark-green: #006600; @light-green: #66cc66;
Note the “@” symbol before the variable name. This is used like the “$” sign in PHP, so if you want to reference your variables, remember to put the “@” sign first. For example:
#content { color: @dark-green }
And then when it’s rendered, it looks like this:
#content { color: #006600 }
LESS Mixins
LESS lets your define several properties within one ruleset, that can then be extended to other rulesets. Like so:
.side-borders {
border-right: dashed 1px #333;
border-left: dashed 1px #333;
}
.block {
.side-borders;
color: #999;
width: 40%
}
That would output something that looked like this:
.block {
border-right: dashed 1px #333;
border-left: dashed 1px #333;
color: #999;
width: 40%
}
And now time for my personal favourites…
Parametric Mixins
I like to compare these to functions – they’re rulesets that accept parameters and can have default values as well.
.curved-corners (@radius: 5px) {
-moz-border-radius: @radius;
-o-border-radius: @radius;
-webkit-border-radius: @radius;
}
.content {
.curved-corners;
}
.btn {
.curved-corners(3px);
}
So in the above examples, our .content element would have curved-borders with a radius of 5px (the default) and the .btn element a radius of 3px, our specific parameter. I think that’s so neat…
Another Really Cool Thing about LESS is it’s use of nesting, instead of cascading or inheritance. Now whilst I’d rather we used inheritance than nothing at all, nesting is better still (when it’s available) but more on that next web design post!
