Validness

It’s always a good idea to try and keep your CSS as valid as possible. On occasion you might need to put some hacks in there for IE6 or IE7 – if there are many, it’s probably a good idea to separate those out to stylesheets that are then loaded in with conditional comments.

To validate your CSS, head over to http://jigsaw.w3.org/css-validator/ – there you can point to a stylesheet URL, upload a file, or directly input CSS and have it validated.

Formatting

To format CSS you can use the “Clean CSS” service at http://www.cleancss.com/.

Input the CSS you want to format and choose from several options, hit submit, and voilà, out comes formatted CSS – it also lets you know the code changes that it made.

The options

From the dropdown select the type of formatting you want. For a production output you should probably choose “High (moderate readability, smaller size)”, if you want to make CSS more readable, use the “Low (higher readability)” option.

Unless you know what you’re doing – you should probably leave “Sort selectors” and “sort properties” unchecked, as these have the potential to break the cascade of styles in your stylesheet.

I personally prefer to keep the “Compress font-weight” option unchecked – (e.g. this changes font-weight:bold; to font-weight:700; doesn’t quite read the same).

After seeing some of the drawbacks, and the advantages of using Less, I’ve decided that it should be put through it’s paces and I’ll be trying to use it in a project in the near future so I can see if it will be a benefit.

A quick breakdown of what Less is

Less adds variables, mixins, operations and nested rules to CSS. This will enable us to treat our CSS a bit more like a programming language rather than a style descriptor language.

Compiling

You write Less in to a .less file and use the Less compiler to turn it into a .css file.

Worried about having to compile all the time? With the Less compiler, simply set the ‘watch’ option on the command line and it will keep tabs of your .less file and compile it whenever there are changes.

To do a quick compile:

$  lessc styles.less my_styles.css

You can leave the name of the css file off, if you do, Less will use the same filename as the .less file, with a .css extention of course. To watch a file:

$  lessc styles.less --watch

Variables

Variables in CSS are an fantastic concept, I can’t believe that they weren’t part of the CSS spec in the first place! For example, by being able to define a colour or width in a variable, you can save yourself a lot of time and hassle. Seriously, who wants to remember that the brand colour for your current client is #0062fc? Consider the following CSS that you would normally write:

p { color:#0062fc; }
h2 { color:#0062fc; }

You would write this in Less as follows:

@brand_colour: #0062fc;
p { color:@brand_colour; }
h2 { color:@brand_colour; }

This is of course a very simple example, I’m sure that if you think about the implications of this, that you’ll see how powerful having variables in a language like CSS really is.

Mixins

Mixins are essentially rules that are included in other rules. Instead of doubling up on writing the same bit of code for several items, you include the code that is generic in the other class. Think of it a very simplified extending of classes in OO languages.

.bordered {
  border:1px solid #000;
}
.box {
  .bordered;
  width:200px;
  height:200px;
}

Nested rules

You can also nest rules with Less, meaning that you’ll have to write less code and you can write code that is cleaner to read. For example:

#sidebar {
  color:#000;
  p {
    color:#00c;
  }
  q {
    font-style:italic;
  }
}

This would be compiled to:

#sidebar { color:#000; }
#sidebar p { color:#00c; }
#sidebar q { font-style:italic; }

Operations

You can perform all sorts of operations on numbers, colours, pixel values. This will allow you quickly do things like set something to the same width as the main wrapper minus an arbitrary amount.

@main_page_width: 800px;
@sidebar_width: 200px;
 
#content {
width:@main_page_width - @sidebar_width;
}

As you can see Less can be very helpful in writing CSS, rather, writing less CSS to achieve more, quicker. Since you don’t have to spend a lot of time learning the syntax of the language, you can get right on with coding!

Make sure you check out the Less website for more information.

Less runs on Ruby, and has to be installed as a Ruby gem. I have had a play around with this on my Macbook, I have yet to give it a whirl on my Windows machine to see how easy this is to use on that platform. You don’t need to build your website using Ruby, or Ruby on Rails, you only need to have Ruby installed on the computer that your are using to build your site.

I have also seen 2 other CSS pre-processors, dtCSS and CSS Cacheer. Both are PHP based, and might be worth a look if Less isn’t what you’re after.

via Carrer Blog: 1 line CSS Grid Framework.

I wouldn’t mind giving a simple grid framework like this a try, quite often we do have to deal with columns of similar widths. If only designers would follow some simple rules, like actually making sure that they have everything line up with a grid.

This extension comes shortly after the announcement that Sitepoint have put up their JavaScript Reference.

The new extension pulls in information from their reference, at the moment it only works for the HTML and CSS reference, but once the JavaScript reference is more complete we might see that integrated as well.

FireScope is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. The extension also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item ie. search for it in the Reference panel or to view a code example.

At first glance, this little addition to Firebug/Firefox doesn’t strike one as more than just a gimmick, but it’s usefulness soon becomes apparent when trying to find out more about a CSS property or HTML element.

All in all most of us who are hardcore HTML and CSS programmers won’t always find the reference that fantastic, but it’s of course for those little used elements and properties where the reference is useful (when was the last time you used the CSS clip property? Anyone?).

One of the more useful things I’ve already become fan of, is the browser support table shown for elements and properties. This allows you to quickly see if there is a buggy implementation, or perhaps only partial support in certain browsers for whatever it is you’re trying to do.

From the Department of Badly Chosen Defaults – Joel on Software.

I love CSS, I love jquery. This sounds like an awesome solution to one of those annoying little problems. Backwards compatibility.