Web layout with CSS is usually painful.  Sure, it’s better than the alternative — trust me, I’ve written enough table-based layouts to know — but at the same time it is painful enough that many insist that web designers should just give up on CSS layout all together.

There are some strong reasons for this:

  • Browsers are fairly inconsistent in their handling of CSS. This means that if you want your design to look pixel-perfect identical in every mainstream browser, you’ll probably be sprinkling your code with all sorts of crazy hacks.
  • Floating is the main mechanism for implementing grid-based layout in CSS. Unfortunately, it is a very unintuitive tool for this purpose.  IE’s broken box model (and other bugs) makes this even worse.
  • On the other hand, tables render pretty consistently, even for older browsers. Even the best CSS layout will only really work in the modern browsers.  Tables give you everything you need to do grid-based layout and rows and columns are much more intuitive than floating boxes.

But there are also so many benefits to CSS!

  • HTML markup is much simpler to write, read, and maintain.  No more scanning through crazy amounts of table markup trying to figure out which tag you forgot to close when your layout broke.
  • Separation of content from presentation makes it silly simple to switch presentation styles.  You might not even need to change your HTML at all!
  • Tables present an accessibility problem with screen readers that CSS layouts (done correctly) do not. To some this might not matter but I care a lot about web accessibility.
  • Styles are reusable! With the right CSS selectors and some careful design of your HTML, you can avoid redundant code to produce similar stylings in different places.  In the old school of web design, you couldn’t avoid style redundancy at all.

So you want the benefits of CSS but none of the pain?  There are CSS frameworks that have been created by some crafty web developers to make CSS a lot less painful.  But these CSS frameworks basically consist of named (read: not semantic) classes which you have to add into your HTML.  If you’re into purely semantic markup, these frameworks don’t really feel like an option.

With Compass, you can have the best of both worlds!  You can use CSS frameworks but you can apply them in a way that still allows you to write your markup in the way that you prefer.  Compass is based on Sass, a meta-language for generating stylesheets written by eccentric Rubyist Hampton Catlin. Sass adds some very nifty features that address some of the main weaknesses of CSS:

  • Named constants:  The one thing you can’t get away from in CSS is having to repeat constants like colours or sizes. With Sass, you can define the constant once and use it wherever you’d like.
  • Hierarchical styling:  Sass emphasizes laying out styles in a hierarchical manner. While this might not generate the optimal size CSS file (due to larger selectors, for example) it is pretty simple to read.
  • Mixins:  In Sass, you can define a set of styles and group them under a name.  Drop that name into the Sass file preceded by a ‘+’ and boom! those styles are all applied automatically.  This is great for applying the same CSS rules to HTML elements that are not semantically related and therefore don’t have the same class.  In edge Sass, mixins can even have parameters!

Mixins are where Compass draws most of its power.  Compass has taken the CSS frameworks and turned them into mixins that can be used in Sass files.  This allows you to use the styles defined for the named classes in the framework without actually forcing you to write those class names into your HTML.  This makes CSS frameworks much more appealing!  Compass also does some other neat things:

  • Integration with major Ruby web frameworks such as Rails and Merb.
  • Utilities: Pre-defined mixins that reproduce CSS effects like horizontal lists (useful for navigation!) and replacing text with an image.  Compass takes full advantage of parameterized mixins as well.
  • Project templates: tell Compass which of its built-in frameworks you want to use and what you want your project name to be.  Compass does the rest!
  • Modularity through partials:  Not all Sass files in your Compass project need to generate a stylesheet. Use partials (with filenames preceded by an underscore) to create modules that you can import into your main Sass files that generate the CSS for your project.
  • Automatically compile CSS when Sass files change:  Miss the edit-save-reload cycle of web design with CSS and HTML?  Compass can watch your project and regenerate the CSS every time one of your Sass files changes.

I’ve been using Compass for a couple of months now and I can’t recommend it highly enough.  CSS doesn’t have to suck, Compass is the proof.  Seriously, try it now!

Tags: , , ,

This entry was posted on Friday, March 13th, 2009 at 11:17 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.