Home > Uncategorized > When LESS Becomes More – Leaner CSS

When LESS Becomes More – Leaner CSS

I came across LESS the other day and thought nice. I then came across it again and re-read it in more detail and thought how easy this is to achieve in PHP.


LESS justifies itself by providing four examples; Variables, Mixins, Nested Rules and Operations. Let’s look at a bit of PHP that achieves the same results for variables and operations.

All you need is a bit of PHP magic at the top of your CSS file and change the link in your HTML to point to the new file with the PHP extension, for example:

<head>
...
<link href="_css/screen.php" type="text/css" media="screen" rel="stylesheet" />
</head>

Assuming you allow the PHP short tags, i.e. you can then use this in your CSS file, screen.php in my example:

<?
header("Content-type: text/css");

// Variables
$brand_color = '#4D926F';

// Operations
$a_border = 1;

?>

// Variables

#header {
 color: <?=$brand_color?>;
}

h2 {
 color: <?=$brand_color?>;
}

// Operations

#header {
 border-top: <?=$a_border?>;
 border-left: <? echo $a_border++; ?>;
 border-right: <? echo $a_border + 3; ?>;
 border-bottom: <? echo $a_border * 5; ?>;
}

There you go, same result in just about as many keystrokes and without the need to learn a new language.

Mixins

If the ‘less’ version declares rounded_corners, why not used the following HTML instead.

<div id="header" class="rounded_corners"> ... </div>
<div id="footer" class="rounded_corners"> ... </div>

CSS style names can reflect style elements, just make sure you’re generic, i.e. don’t use red-text as a class name, use highlighted. Or if you’re using red text for an error message, why not call the style error-msg.

Nested Rules

I’m not sure this adds much clarity to large stylesheets as it’s just another block of indents to manage. Good practice should mean that structural CSS rules are placed together anyhow. So if you really do need a set of styles for the Header section, place them all together and make sure you use the #header selector. I tend to break my CSS into sections; global styles first followed by the overall sections of the design. I then place styles in the order of the HTML elements I’m replacing and finally by the custom styles with all of the styles listed alphabetically, where possible. The idea is to find a style quickly without resorting to Ctrl+F all the time.

#header { ... }
#header a { ... }
#header p { ... }
#header .error-msg { ... }
Categories: Uncategorized Tags: , , , , , ,
  1. allkindsofralph
    June 28, 2009 at 10:43 am

    good stuff … yeah I thought LESS was a great idea .. but its a good thing I found that you can do this type of stuff with php so I don’t have to try and learn ruby just to use LESS .. thanks for the post

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: