As you may have noticed, I made a few changes to the website here at good ol’ nickhodges.com.  I added a column of boxes on the left, with the idea being to make stuff more accessible without so much scrolling.  And, well, yeah, okay, I’ve used that space to add a few more advertisements.

And while I was at it, I cleaned up a few things with the layout and the CSS.  It’s what I did with the CSS that I’d like to talk about today.

The main thing that I did was to start using the CSS pre-processor called Less.  Less allows you to do a lot of things “right” when writing CSS.  The first thing you notice when you start writing CSS is that it is a horrible violator of the DRY principle – Don’t Repeat Yourself – and Less solves a bunch of those problems.  It’s hard to write “clean CSS code”.  Less can help.  Less allows you to:

• Create a *.less file that is then processed into your CSS file.  You can do this manually with a command line preprocessor, or you can do it on the client-side with Javascript.  Below, I’ll discuss how I pre-processed my *.less file automatically
• Declare variables for colors and other things.  Say you have a color that you use in a number of different places.  You can declare
  
       @WidgetBorderColor: green;
  
  and then everywhere you had to type green, you could put @WidgetBorderColor instead.  Then, if you want to change from green to red, you only have to do it in one place.  That is really nice. 
• You can also declare mixins – or chunks of CSS code that are commonly used.  For instance, if you have a bunch of places that use  
  
       {padding: 0px; margin: 0px}
  
  then you can declare
  
       .p0m0 {padding: 0px; margin: 0px}
  
  and use that as an “alias” in your *.less files

       body {
        .m0p0;
        font-family: Verdana;
        font-size: 13px;
        color: @Black;
        background: @White ;
       }

• You can also use parameters to pass in to your mixins if you want, an other more complex constructs, though none of it is terribly difficult.   The Less page has all the documentation in one place.  The two features above were what I used in an effort not to repeat myself in my CSS.

Once you have your less file set up, you can process it via the command line, or using a GUI compiler tool.  Because Less is written in Javascript, you can use node.js to run it on your local machine.  To do that, you can download the Node Package Manager and then install  Less by simply executing

npm install less

npm is kind of interesting – it’s an online registry, so when you issue the above command, it goes out to a public registry and finds the Less package and simply installs it – there’s nothing for you to install. I guess it is much like Nuget in that regard. 

After that, you can then execute the lessc compiler. 

So the workflow at this point is:

1. Write CSS and Less code in a *.less file
2. Compile the *.less file into a *.css file.  (For instance, I use a batch file with:  c:\Code\node_modules\.bin\lessc C:\NickHodges\themes\nick\style.less c:\NickHodges\themes\nick\style.css
3. Deploy the new CSS file with my site
4. Repeat as necessary

Step 2 is kind of a bother, though.  You have to shell out to the command line to do the compile.  Who wants to do that if you don’t have to?

Well, I sure don’t.  So I found a cool tool called WinLess which does a nice thing – it automatically compiles your Less code into CSS every time you save your *.less file.

It works great – you just point it to your *.less files, and whenever you save changes, it automatically compiles the Less code down to CSS.  That way, your CSS is always up to date, and you just have to worry about your Less code.  Maintaining the CSS file is totally painless.  So now the workflow is:

1. Update your *.less file as desired
2. Save
3. Deploy your *.css file.

That’s a lot easier, eh?

Now what I really want is a tool to find patterns in your CSS and automatically turn them into Less entries.  That would rock.

CSS is powerful and cool, and you can’t create a well-designed website without it.  But as a language, it’s not really very “best coding practices friendly”.  Less makes it much more so.  If you set things up correctly, you can do your styling in Less and forget about CSS altogether.

What do you guys do with your CSS?