Thoughts on CSS Architecture

January 3, 2013

As I look back at 2012, the idea of CSS architecture consumed a lot of my thoughts and attention throughout the year . I had put some thought into how to organize my stylesheets in the past (thanks to Jina Bolton). But I had not thought about it as holistically as I began to in 2012.

I started thinking about the word architecture this morning. What is architecture and what insights can thinking about the meaning of the word inform my thinking about working with CSS?

Here are my initial rough thoughts. I hope to continue to expand on these thoughts in some form later.

  • it is designed
  • it is a carefully conceived plan that is meant to be implemented
  • a problem exists that must be solved
  • it is a conceptual model
  • it takes thoughtful planning
  • it implies structure and organization
  • the goal is to create an organization or core concept around which a system is constructed
  • it is about coming up with an agreed upon system
  • it is about intention and purpose
  • it involves both art and science
  • Many players are involved in building a piece of architecture. They must all agree upon the common plan and stay committed to that plan as they implement.

I am going to go ahead and expand on a couple of these things.

A Problem Exists

What is the problem? Andy Hume helped me to define this in his talk, CSS for Grownups. The problem is that CSS is very powerful tool. It has a lot of flexibility and few constraints. The problem is that CSS gets complex very quickly and becomes increasingly more difficult to maintain.

This is a problem with a single developer. It becomes a more complex problem when a team of developers is involved. I saw this problem when I was working alone and more so when I joined a team that did not have a system in place.

  • Where do you add new code?
  • How do you write your code in such a way that it does not have to be overridden multiple times?
  • How can you make it more efficient and easier to maintain over time?

Andy proposed that the solution to this problem is to architect and structure our code to make it more maintainable over time. The goal is maintainability. In order to do that, we need to introduce constraints and build a system that everyone understands and is committed to implementing.

So the solution includes thought, planning, and agreement in order to achieve the goal of maintainability.

Thoughtful Planning

More work is necessary on the front end of the development project to stand back and look at the big picture. It is so tempting to just jump in and start coding up a design without thinking through how all the parts are related, connected, and vary from each other.

Planning is not always as much fun. It can be really hard work.

As I have embraced a more intentional and purposeful approach to writing my CSS, my workflow has changed. I spend much more time reviewing mockups. I have started printing them out and marking them up.

I am looking for patterns and common elements throughout the site. I stopped focusing on individual pages and started looking at modules or components. Taking this approach helped me to be more efficient as I implement a design.

More to Come

I have been thinking about writing about CSS architecture for awhile. (I only started calling it that recently. I like the term because it does a great job of describing what it is.) Finally, I have gotten some thoughts out of my head and into a post. And I believe that there will be more to come.

I hope to follow through and write more this year. I always have a lot of thoughts and ideas swirling around in my head. I want to become more comfortable with writing shorter pieces and not worry if my thoughts are not yet complete.

Resources

This is not a comprehensive list but a good place to start when thinking about CSS Architecture. These are the sources that have helped shape my thinking and continue to challenge me to put this into practice.

  • SMACSS – A style guide and approach toward building your own system for CSS by Jonathan Snook. This is the thing that got me all started thinking about the importance of CSS architecture.
  • CSS for Grownups – Excellent talk by Andy Hume that really convinced me of the importance of approaching CSS with more thought and intention.
  • CSS Architecture – post by Phillip Walton that lays out some great goals for CSS architecture
  • Harry Roberts – Harry is a front end developer in Great Britain. He has done a lot of writing about CSS architecture that continues to challenge me and help me go deeper. He also has developed a framework, Inuit.css that I need to dig deeper into.
  • OOCSS – Nicole Sullivan is the first person I know of who started writing and talking about the need for a CSS architecture.
  • About HTML Semantics and Front End Architecture – great thoughts from Nicolas Gallagher. He has also written a style guide for writing idiomatic CSS.
  • BEM Methodology – more great thoughts on approaching CSS architecture

Comments are closed.