In this article I will try to dissect how we use CSS in order to design our webs and try to find a model that will make it easier for us to use and create CSS Frameworks that fits all the different problem domains we are facing when designing our websites. The Anatomy of Web Design is essential knowledge in order to create CSS Frameworks that are actually solving the problems we do not want to repeatedly solve over and over again when building websites.
- Design is difficult to quantify and generalize
- Designers do not think as programmers, who always quantify and generalize because they are lazy by nature.
But there are some projects, who have identified the css reinventing the wheel problem, both of them focus on giving designers and developers a generic set of CSS that solves problems that occur, independent from website. The two biggest, and most promising projects are:
They have a lot in common, both focus on first adding a reset CSS to the document and then use a grid for creating all types of design grids you could ever dream up. Blueprint has a module for forms, print and typography, while YUI has modules for fonts and a base css that tries to make a cross-browser-stylesheet from the reset document. YUI offers themes for different widgets/components. No project I have found focus on solving the biggest problem: Specific CSS for specific needs.
As you can see, we have a lot of different keywords (in bold) already, and we could start to quantify and generalize how we look at CSS.
Generalising design is what CSS is all about. CSS is about finding property values that can be altered and combined in order to achieve the desired result in design. We may say that CSS in it self is the first level of abstraction when it comes to design. For a couple of years we have been focused on creating intriguing designs with our bare hands with CSS as our only (mental) tool.
Pretty soon people working with CSS found out that we had to take the abstraction one level higher, separating types of design into different parts of the design, making the stylesheets easier to edit, more modular and easier to redesign. A typical step is to split the applied styles into different parts, such as grid, typography and design. On top of that we possibly added specific styles for specific parts of the website. By making this separation, we made it easier to change and maintain the design of our websites. If we look at the biggest websites today (with a designed frontend) a lot of them uses this separation of design to different degree.
I am in the middle of a big redesign, re-gridding of one of the websites I am responsible for the frontend on, and I believe that we have to start using solutions like this for three main reasons:
- Maintainability. If we use well defined components with a good documentation, it will be easier for people working with maintenance of the website, to create components, pages, flows that we know for sure will fit the graphic profile and will work in all browsers.
- Quality. By minimizing the number of rows of new code on all levels we will create a better product. By using already tested and verified code, we will of course create the foundation for a better product.
- Focus. Designers can focus on design, developers on development and people who have written CSS in the past, can start build UI Components in [INSERT_YOUR_PREFERRED_LANGUAGE_HERE] and make sure developers are distanced from the look and feel by creating a good API for creating these design components. But that is another article.