With the focus being on the latest and greatest CSS3 snippet to replicate something we’ve done with images for years, it’s rare to read a solid discussion on the fundamentals of CSS. It was completely refreshing to read just that in Scalable and Modular Architecture for CSS (SMACSS) by Jonathan Snook.

I’ve had a long time respect for Jonathan. I remember reading his articles as I was teaching myself CSS, he was then just as much as he is now involved in the community and sharing his knowledge. I found his advice not only to be sound, but also referencing stuff he was currently working on. For one reason or another, that’s really rare with the more “Web famous” designers/developers out there, and I really like that.

The book is preempted on the site like so:

I’ve been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. What I’ve found is a process that works equally well for sites small and large.

Learn how to structure your CSS to allow for flexibility and maintainability as your project and your team grows.

A bit later, the premise is wrapped up with:

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!

Refreshing. Much of what we read about lately is the latest CSS framework or boilerplate whatchamacallit. Fact of the matter is, while those tools can be useful, they’re only part of the solution. It’s up to you to fulfill the rest with your own know-how, and you need a plan of action.

Scalable and Modular Architecture for CSS

The book is broken down into easily digestible chapters.

• Four Types of CSS Rules
• Themes and Typography
• Depth of Applicability
• Selector Performance
• State Representation
• HTML5 and SMACSS
• Prototyping
• Formatting Code

There are a few additional sections, but for the purpose of this review I’d like to focus on the overall structure and message of the book and try to explain why I think it’s so valuable.

Jonathan is trying to explain his fundamental approach to CSS as a whole. We’re far beyond simple tips and tricks and instead focusing on the big picture approach, how you’d handle the overall architecture of the way you style an entire site from start to finish.

Jonathan begins by explaining that he’s broken down CSS into four parts:

1. Base
2. Layout
3. Module
4. State

This is the foundation of SMACSS and the segmentation is discussed throughout the book. Jonathan focuses on the fact that writing effective CSS means cutting down the amount of CSS while striking a balance with specificity. Thinking about CSS in these four parts is fundamental to SMACSS. Jonathan outlines specific definitions for each of the four categories of CSS.

Base

The defaults. They are almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors.

Layout

Divide the page into sections. Layouts hold one or more modules together.

Module

The reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on.

State

Ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive?

Understanding this segmentation is essential to the SMACSS concept. The naming rules for each of the four categories are explained in the chapter as well. From there, a much more elaborate explanation of each is offered, putting more context to the reasoning behind the classification. Additionally, working examples are provided along the way, offering some context as to why Jonathan has come to these conclusions surrounding his method of writing CSS.

Perhaps the most complex category in the group is that of state. I’d be willing to bet that while most people do (correctly) use CSS classes to control the state of various elements on page, most do it with the sledgehammer called specificity. Jonathan takes the time to thoroughly explain a targeted approach to styling state that will help avoid both frustration and confusion down the line.

One of my favorite sections of the book is Depth of Applicability which outlines at length the necessity of finding a balance between dependency on HTML structure and specificity of your CSS. The fact of the matter is, you don’t want the way you’ve written your CSS to grossly over-effect the way you need to maintain your HTML.

Jonathan also touches on what appears to be a growing topic, Selector Performance. While changes are often negligible, performance will continue to grow in importance as the CSS layer is doing more complex things like border radii, box shadow, and other more intense operations.

I could outline why I like each and every chapter of SMACSS but instead I’d like to encourage you to give it a read. By far one of my favorite additions is the recently added screencast outlining how Jonathan would apply SMACSS to someone else’s project after he had become frustrated with implementing SMACSS on his own. Additional members-only features look to be added in the future, so that’s something to consider after you’ve perused the contents of the book.

Overall reaction

SMACSS started out (and continues to be) a free ebook. A pricing model was introduced that gets you access to platform versions (PDF, Kindle) and there’s also a Lifetime Membership available with additional benefits, including a discount on the workshop Jonathan has built from this endeavor.

SMACSS can be read in a single sitting, and I think it should be. In fact, reading it a couple times over a couple of months would be a great idea in my opinion. It’s important to take the advice into account while working, and the only way to do that is to pick a piece out that you think will integrate well and try it.

Breaking habits is hard, especially when it comes to work. People get settled in their ways and if it works, it works. Don’t fix what’s broken. It’s important, though, to qualify your methods from time to time in an effort to make sure you’re still doing not only your clients justice, but yourself by producing the best work possible. What better way to do that than to compare your workflow to a highly respected professional?

I can’t say enough how refreshing it was to read SMACSS as Jonathan has put into words something I’ve struggled to vocalize for some time now, and done a better job than I could have hoped to do. His recent experience at Yahoo! really puts the book into perspective and shows the application to working among teams on very large scale projects, something you don’t often get a look into as an observer.

While Jonathan isn’t touting SMACSS as the end-all-be-all for CSS, he rightly explains that CSS deserves a targeted process, a style guide, some sort of structure. He doesn’t think that everyone should use his, but hopes a glimpse at how he works will help you refine (or define) your own.

Advertise here with BSA

Quick formalities. Could you provide a bit of a bio for yourself?

I’m currently a freelance designer and developer based out of Ottawa, Canada.

What got you started working on the Web?

I’ve always been a computer geek. I used to hang out on the BBSs of the day. When the internet came around, it was fun to see all the information out there. But it wasn’t until the web came around that things really started to take off. So, it became a hobby of mine until 1999 when I decided to break into the sector and try to make a career out of it. I landed a job at a local agency within the month and, as they say, the rest is history.

What’s a typical day like in the life of Jonathan Snook? Is there such a thing?

As a freelancer, no day is typical — especially with family. While the type of projects I work on vary, most of my time is spent from home with the occasional conference call or on-site visit.

You’re basically famous for a multitude of talents; what do you call yourself? Designer, developer, programmer, writer, all of the above (and then some)?

It depends on who I’m talking to. At the most basic level, I’ll just say that “I make web sites”. If I’m talking to someone who understands the web then I’ll say that “I’m a freelance web designer/developer”. That covers the majority of the cases.

Of all your talents, which do you enjoy working with the best?

That’s one of the great things of having multiple disciplines — I can work on whatever I like best at any moment. Sometimes I want to design, other times I want to get knee deep into code. In the end, it’s all about solving problems in different ways.

Geeky details. Would you mind outlining your choice of hardware and software you wouldn’t want to be without?

I’m still a diehard Windows user running Microsoft Office. But I couldn’t live without UltraEdit, my text editor of choice for a number of years. I also need to have Fireworks for design work and Dreamweaver for heavy HTML work.

You’ve managed to release an excellent book recently, how was the writing experience? If given the choice, would you start over and do it again? What would you do differently?

Writing is hard. I found myself doing a heck of a lot more research than I ever thought I would. That can really slow you down. I’m not sure that I’d do anything differently except have a better understanding of the time and effort it deserves. Writing an entire book definitely isn’t something that I necessarily want to do again but I’ll probably write a chapter or two for multi-author books when the opportunity arises.

You’re familiar with both the agency as well as freelance way of life, can you say that you’ve got a preference?

For the most part, I prefer the freedom that freelance brings. I like working from home. I like working closely with clients to build cool things. It takes a great deal of discipline, though, which I don’t always have. Working within an agency also has some freedoms, like the freedom from decisions. It’s nice to just ask, “which is more important” and then let a project manager handle the client. For now, though, I’ll continue with the freelance life. It still offers up potential. I’d like to take advantage of that and exhaust those possibilities before I jump back into working for someone else.

What is it that keeps you speaking at conferences, writing books, and maintaining your very popular website?

I still enjoy the process of sharing knowledge. But at the same time, it’s also vital marketing for my own business. It’s a great win-win.

I want to thank you so much for taking some of your valuable time to interview with me, Jonathan. I know you’re an extremely busy person and I really appreciate it.

Thanks so much for asking.

Advertise here with BSA