The Right Frame of Mind: Applying the Lessons of CSS Frameworks
By Alex Dawson
n recent years, the web design and development world has undergone a transformation. Development frameworks—both on the server side (Rails, Django, CakePHP), and on the client side with JavaScript (jQuery, Prototype) and CSS (CSS Frameworks like Blueprint and the 960 Grid System)—have come to the fore, promising an increased level of productivity, less repeat coding for common functions, and, in the case of the client-side frameworks, an abstraction from browser inconsistencies. While server-side and JavaScript frameworks have been widely welcomed and accepted by developers, CSS frameworks have been much more controversial among designers.
While I happen to agree that CSS frameworks do come with a wide range of disadvantages (such as unnecessary bulk, additional HTTP requests, and the risk of becoming overly reliant on other developers’ code) and advantages (faster production times, fewer browser issues, easier development for beginners), their very existence provides us with an opportunity to re-examine how we write our own code. Ideally, if we can incorporate the best lessons of reusability, abstraction, and ease of use from these frameworks, we can avoid the need to use CSS frameworks by adapting our code to follow their ideals. CSS frameworks are simply a solution to problems web designers experience on a daily basis, enabling them to produce clean, agile, cross-browser code. Even though these tools have their own issues to contend with, they can serve as an excellent model to produce higher quality, more portable, and reusable CSS.
The purpose of this article isn’t to debate whether or not you should use a framework, but to examine why the need for such solutions exists. We’ll take the processes used (and lessons learned) in their creation, and try to show how they can be applied to your own style sheets. If you examine the source code of any framework, you’ll discover a world filled with innovative ways to increase the mobility of style and, as a result, increase your own productivity without the disadvantages that the use of third-party components commonly brings with it.
When producing CSS code for your own designs, you likely go through a very simple process of deciding how you want your HTML elements to appear. You might start by applying conventions that are inherited throughout the site (through element selectors), and once this has been completed you then hook on enough class and id selectors to style the individually distinct parts of the site. This of course requires time and effort, and if you produce more than one website, you’ll soon find yourself repeating certain conventions (such as column layouts, typography defaults, or perhaps even the way in which your navigation menus appear).
The problems frameworks try to solve can be divided into three groups:
