Writing less css

One basic rule in programming is reuseability. Every programmer has developed a pattern on how his code is structured, where to keep common functions, application constants, etc. Thus, the code produced is good code that is easily maintained and expanded. When it comes to writing HTML and css things are a bit differently. Most web developers (a.k.a. php or asp.net programmers) sooner or later have to learn to write css.

Css works in a diferent way than programming. You have classes, but you cannot create base classes, there is no inheritance and generally there is no reusability what so ever. At least in the way a programmer understands reuseability. One of the things that really bugs me with css is that sometimes I need to define a color many many times inside a stylesheet and there is no way to avoid this. For example, the <h1> has a specific color (e.g. #575757) which you also want to use it in borders. You have to write the color “#575757” in your stylesheet more than once, and if there is ever the need to change this you must go in and change it twice. I am aware of the Replace all feature that all text editors have, but what if you wanted to change only the color in the borders? You would have to read the stylesheet and decide where to make these changes. There are many scenarios I can think of that would prove that css is not that easy to maintain because you usually end up repeating the same properties again and again in your stylesheet.

I recently found a tool that faces these issues very nicely. Take a look here.  The less tool extends css and allows us to use variables, functions (they are called mixins), and implement class inheritance! These are the things that you will hear a programmer complain about css. What you can do with less is write css with some extensions and then you run a script that will generate a css file. The benefit is that you can write css in a much leaner way.  Let’s take a closer look.

• Variables.
  You can declare variables e.g. for a color value and instead of repeating the color many times in the stylesheet you use the variable. For example:

  @main_color: #575757;h1 {color: @main_color;}
  #footer {border-top: @main_color;}

• Mixins.
  Declaring a class can have a parameter. This parameter acts like a variable only in the proeprties of this class. So, instead of writing 3 or 4 similar classes that have differences only in margin values, you could use a mixin and have the margin value as a parameter. With mixins, classes can have as properties other classes, hence we have inheritance!

  .rich_text(@marginsize) {margin:@marginsize;}
  .main_text {.rich_text(4px)}

• Nested rules.
  With css if you wanted to define an element differently in a specific area of the site you would use the syntax:

  #footer {...}
  #footer p {...}
  #footer p a {...}

  Using nested rules you can write the same thing in a more nice and readable way.

  #footer {... p {... a{...}}}

• Operations
  You can set base values for font size, border width and define other properties as a proportion to the base value.

  @base_border:1px;
  #footer {border-bottom:@base_border+1;}

You can find similar examples in less web page, http://lesscss.org/. One thing you probably not like, is that the less code must be processed by a Ruby script. This is not very practical, even if you do have Ruby installed because this is a process that your IDE wont give. There is a workaround for this that I found here. There is a .js library that processes .less files and that saves you from the trouble to build your css every time you want to deploy your css. The parsing of the less file occurs in the browser.

This tool I very helpful for me, since it is easier to write and maintain css. I have bumped into a few articles in the past arguing that css doesn’t need to have features such as variables, functions, class inheritance but I never found their arguments very strong.

Googling a bit, I found a web page that mentioned a .NET port for this tool (.less) but sadly, the website for this port was parked and I couldn’t manage to find this port elsewhere.