I came across a very nice introduction to the COMPASS CSS framework over at Mashable today, which got me thinking about the wealth of decent and accessible resources available out there for those new to CSS – whether focused on saving programmers’ time or just generally righting some of the shortcomings that we often encounter with CSS (the latter is the idea behind the COMPASS framework).

Anyway, here’s a quick list of some decent resources aimed at those fairly new to CSS, designed to help you build better looking websites in less time:

1. Frameworks.

You don’t have to use a CSS framework – but it can make things a lot easier and quicker (once you get it all up and running). Here’s a good example of how it can be done:

Getting Started with the COMPASS framework. (This is the aforementioned intro guide over at Mashable).

Compass is attractive for the simple reason that it’s an open source free framework, which boasts support for variables and mixins, flexible tools for ensuring cross browser compatibility, SASS-style nesting of CSS rules and plenty more. Don’t worry if you’re new to CSS frameworks as the guide has it all down in plain and clear black and white – including a list of resources to consult before diving in.

(While we’re on the subject of Mashable, they also recently had this nice feature on CSS boilerplates, templates and resets a few days ago).

N.B. If you’re unsure about which CSS framework to plump for, here’s a nice overview of some key considerations for making the decision:


2. Shortcuts and ‘tricks’.

Most people quickly realise that CSS sometimes offers multiple ways to get something done – and that at least some of them can often be super messy and time-consuming.

There’s loads of tips out there on how to avoid getting bogged down doing things the long/hard way, but from an introductory perspective I like these two short summaries, each of which is just the right length so as to not be off-putting or daunting: CSSDOG and ITWALES.

3. More in-depth guides.

Once you’ve gotten a bit more fancy with CSS there’s plenty out there to help take things to the next level. The only difference between all the various guides out there is simply how clear they are (screenshots help) and also how easily navigable. Here’s two excellent resources:

That’ll do for now I think – unless you have any others to recommend (if so, please let me know in the comments!)