SMACSS – Scalable and Modular Architecture for CSS

SMACSS Book Cover - Taken from smacss.comMany of you may already be aware of it, but in case not, I thought I’d point out that Jonathan Snook has released a site/ebook called Scalable and Modular Architecture for CSS or SMACSS (pronounced “smacks”). If you’ve read any of his previous stuff or had a chance to meet him at past events like South by Southwest Interactive, you know he’s a smart cookie, and nice to boot.

SMACSS is an interesting look into Jonathan’s process and structure, and as he puts it “a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It’s an attempt to document a consistent approach to site development when using CSS.”

I’ve personally spent a lot of time thinking about how I organize my CSS, so I love the opportunity to see the path that Jonathan has followed. We follow different practices in some cases (organization of attributes for example), but at a minimum, reading through his choices has caused me to think about the patterns I have set for myself.

Beyond the content, I love the fact that he’s sharing it publicly on the Web, in ebook format and via a third “Full Membership” option, so the information is freely available but he’s still able to profit from his efforts. I’ve signed up for that last option, in part to support him, but also because I’m excited to see what he’ll release to those members.

Image from the SMACSS site

SimpLESS »

“Save your *.less file and, BOOOM, SimpLESS generates a 100% valid standard CSS document out of it. No further steps, it’s that simple.”

Prefix free »

“lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.”

Scout »

“Compass and Sass without all the hassle… a cross-platform app that delivers the power of Sass and Compass to the hands of web designers.”

LESS.app For Mac OS X »

An app that autocompiles .less files into CSS. I like this idea much more than having JS do the work on the front-end, or for that matter, having the server-side scripting language like PHP or Python compile it.

Re-tabulate »

A great breakdown on how to switch the order that the content and navigation is displayed based on the browser size, using CSS. A key component to truly responsive Web sites and apps.

Prefixr »

Paste your CSS into Prefixr and it will automatically add vendor prefixes for CSS3 properties. Even better, there’s an API available, so you can automate the change or hook into it from your favorite IDE.

Smoosh »

via @joemccann
A command line tool “for packaging your CSS & JavaScript projects. It will lint your JavaScript with JSHint, then build and minify your files (if you’d like) with UglifyJS for JavaScript, and Sqwish for CSS.”

CSS Lint »

We’ve gone too long without a good lint tool for CSS. This one provides syntax checking and applies “a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.”