Home > Web > Just CSS? No way.

Just CSS? No way.


CSS is really a great addition to the present web, but if you’re a developer you would feel like something’s missing. CSS is really helping when it comes to content and layout separation, but on its own, it is not a really powerful language. As a developer you will really feel the need of, at least, things like variables, to make your code easier to maintain.

Built on top of CSS there are two languages, Less and Sass. The basic idea is simple – a language very similar to CSS that features a simple syntax for enabling variables, nested rules, rule inheritance and many other nice features. And using some kind of compiler, you are able to generate a CSS file based on one or multiple source files.

Less

I initially used Less. Huge improvement over CSS. At least you had variables and you could organize your elements better. You want to modify a color, a font size or a padding, you just modify one variable in one place and you have all your buttons, links, lists, in one word all your components updated to the new style. The days where you just scan through the code to find that color are gone.

I don’t know about you, but in CSS I find it very hard to organize my rules. But now I have nested rules and even rule inheritance. And if we came to the code structure part, CSS imports are helping a lot. But there’s a problem with these imports: different CSS files – different requests. And you don’t want 4-5 requests in your page just for the styles. Usually you want just one. And that’s very easy now, as imports are made compile time and all your styles are combined into one.

SASS/SCSS

And now that you tasted all these things, you would want the next level. What about loops and conditional blocks (if statement)? And then I switched to SASS, which has all these features and whatever Less is bringing to the table. Actually I switched to SCSS. Because I personally don’t like languages like Haml – too error prone. And SASS is such a language. But not SCSS, with a very alike CSS syntax.

Some tips – How to organize your content

I find it very useful to have the following files

reset.less/.scss
a general reset file used to bring all browsers to a common ground
elements.less/.scss
a file containing all the global variable definitions, like button colors, heading sizes etc.
shared.less/.scss
a file that will contain CSS rules that will span across all your web site sections; then you can have a file for each section that will import this one

Conclusions

Of course, Sass/Scss has its limitations as well, but it’s a huge step from CSS. Amongst its main limitations I would remember: no recursion on mixins (which are similar to procedures/functions), limited set of functions for working with lists, there’s no way to define custom functions outside Ruby.

In this light, I can say that CSS on its own is obsolete, unless it will be extended with features like the ones above. In a future article I will come back and present how to integrate Sass with Maven and Eclipse.

Categories: Web
  1. Dorthy
    July 9, 2013 at 10:15 pm

    Very nice article, totally what I was looking for.

  1. April 24, 2013 at 12:40 am

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: