21 Aug 2013, 23:41

CSS, the next steps

CSS, for Cascading Style Sheet, is the way to define how your site/app will look like. Up to now and as it is a declarative language, it was done mainly manually, with no automation, nor testing tools except you, opening your browser and validating the rendering on your code. So for large application, you may miss the impact of some changes.

For a few months/years, we can see some improvements :

  • One one side, being able to automate/compute your CSS by being able to use "variables" , inheritence, default value etc.
  • On the other side, being able to test your CSS  in all ways (syntax, styleguides, regression, rendering)

Computing CSS

Main actors on this topic are Less and Sass or even Compass (which is based on Sass). Idea behind such tools is to extend CSS by bringing some dynamic through variables, mixins, functions, etc.

As you did for CSS previously, you will define your style in a file, bur with using some advantages of the less/sass syntax.

Example with less ; let's say you want to have rounded corners (the famous one) for the boxes on your site. You may say that by default, the size should be 5px but for some cases, you need 10px.

In pure (old-school) CSS: you will have wrotten :

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

What you would write with Less :

.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Here, we defined :

  • Define the .rounded-corners mixin which would include all directives for all browsers about rounded-corners.
  • Define the radius variable with a default value of 5px but that you overwrite for the footer with a size of 10px.

If you give the "less" file to your browser, your site will not render well. Indeed, you need first to compute/compile your final css file based on the instruction of your less/sass file.

So at the end, less will generate the CSS code you would have written yourself but in a more structured and consised way. Look at the example on each site to have a deeper overview as above example tends to be the basic one.

Such tools aimes to ease maintenance of your CSS files.

Testing your CSS

At the end, even if the maintenance of your CSS were simplified by such tools, you always need to test them to avoid regressions. A recent initiative CSSTest is born, which aims to gather all the tools, techniques and methodology about testing your CSS. 4 types of test are to be made :

  • Syntax : Did you literally make mistakes in your CSS?
  • Project : Does this CSS meet the standards you set?
  • Reference : Does the rendered page look as you expect it to? Cross-browser as well.
  • Regression : After actions are performed, does the page look as you expect it to?

The author of this initiative gives an example in the article "4 tools for automatic CSS testing" covering each topic mentionned above. He also present his approach and existing tools in automated testing and the tale of orangered.

This second topic is quite new but improves quickly ; for the 2 first topics, I'm quite confident about the tools. For the two last topics, I'm a little bit sceptical as I'm not sure about dev to write "CSS Unit Tests" something like :

Feature: Navigation As a Web Designer I would like to test my CSS 

Scenario: CSS

Given I go to "/empty.html"

Then the "Main logo" should have "margin" of "1.5em"

And the "Main logo" should have "font family" of "Lobster"

But maybe it's just a matter of time ; and such a test, even if it passed at a semantic point of viiew may fail at a rendering point of view.

Another tool not yet mentionned in the previous initiative : csscss aims to find duplicated declarations in your file.

Did some of you start to use such tools to validate your CSS (beyond HTML inspecctor/Firebug ?)

[Edit 1] : an introduction to LESS with LESS CSS Beginner's guide.