Thinking about CSS Architecture

With all my work at Yahoo!, I'd been thinking more and more about CSS architecture. I really sat down and took the time to analyze my process. What's the most flexible but straightforward way to do it? How does this fit in with the team process and how does this work in comparison to how other people are doing it?

I started making notes and eventually started writing up my thoughts. Was this going to be a full-fledged book? Just an e-book? Should I charge for it?

In the end, I found my time limited and my thoughts a little scattered. Over the weekend, I decided to do it more "blog" style and just write my thoughts on the various related topics that came to mind. Nothing to download, no store to go to, and no cost to you. The result is Scalable and Modular Architecture for CSS or SMACSS (pronounced "smacks") for short.

The intent is to have it be an evolving guide to CSS architecture for sites small and large. I will continue to work on the site, adding new content, and reworking existing content. I hope it'll be a resource for people to revisit and to refine their workflow for the better. More examples and more topics will be added over time.

Read, bookmark, and share: Scalable and Modular Architecture for CSS.

Published September 26, 2011
Categorized as HTML and CSS
Short URL: https://snook.ca/s/1002

Conversation

9 Comments · RSS feed
1
Gene Parcellano said on September 27, 2011

Awesome. Can't wait to read this.

2
Marlon said on September 27, 2011

Excellent idea! Going to the next level in CSS ;) Thank you!

3
Kristina said on September 28, 2011

WOW, thank you! This is EXACTLY what I needed right now. I've been doing a lot of research on CSS architecture lately, and you've provided so many answers for me. :)

4
Raghavender Reddy said on September 29, 2011

WOW, Great post... This exactly I was looking for I am going to follow this structure in my project which I am planning to redesign.

Thank you

5
The Peach said on October 02, 2011

well done, thanks for sharing this. Very useful :)

6
Anthony said on October 30, 2011

This is a great read and is something that has been on my mind as we have run into some specificity problems and need better CSS organization for our "not small" site. I'd love to see more about the organization of the 4 categories when it comes to media queries. Also, how do HTML5 tags like <header> and <footer> change things?

7
Website Nonprofit said on November 15, 2011

Some great thoughts on CSS for any level. Great idea to have this evolving guide to CSS architecture, so many articles are so specific many people have forgotten the architecture and process behind the css which makes it an easy tool to build and maintain sites.

8
Nima said on March 26, 2012

hey beautiful blog site and web theme. I hope I'm not ninoyang you I just wanted to inquire precisely what wordpress plugin you utilize to show the most recent comments on your blog? I really want to do something along the same lines for my free iphone 4 website but I cant acquire the plugin or widget for it. Thank you for your time :)

9
cheap bookmarking service said on September 20, 2012

NRy2sk Thank you ever so for you post. Great.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.