in CSS, User Experience

Should I Use a CSS Framework?

960gs Grid Example

I recently had a conversation with a colleague about whether or not it would be beneficial to use a CSS framework on some of the enterprise web sites we build. His response was that he had experimented with them but he isn’t a fan of them. His reasons are consistent with the arguments I have read posted on various places on the world wide web. I, on the other hand, am not convinced by the arguments against using them.

A CSS framework, in case the reader doesn’t know, is a collection of CSS files containing predefined rules for layout widths, columns, typography and browser resets. Browser resets are CSS rules that over-ride default style settings that may vary from browser-to-browser such as paragraph and page margins and relative sizes of paragraphs, header elements and list items.

A CSS framework allows the front-end developer to align elements to an underlying grid and create columns in the layout by simply applying a specific class name to the HTML elements on the page. Using a framework saves time because the markup for columns, alignment, relative sizes, etc. are already worked out. Additionally, cross-browser compatibility issues are handled by the framework so time is saved in testing and debugging styles in different browsers.

The debate about whether or not to use a CSS framework seems to be largely a matter of personal preference and ideology. Developers who tend to be more purist and strive for semantic markup tend to be against using a framework, whereas developers who are self-proclaimed pragmatists tend to be more open to using them.

The arguments against using a CSS framework:

  1. CSS Framework class names have no semantic meaning and refer to presentation attributes like “container_12”, “grid_8”, etc. and so introduce non-semantic markup into the document
  2. CSS Frameworks require extraneous code in order to achieve the desired layout causing page bloat
  3. CSS Frameworks restrict the design by forcing you to adhere to a set of predefined widths for web page elements, including the web page itself

The arguments in favor of using a CSS framework:

  1. CSS Frameworks speed up the front-end development process
  2. CSS Frameworks encourage a more structured design the same way a newspaper grid system does
  3. CSS Frameworks normalize common cross-browser compatibility issues

Web Page Development in the Real World

The points on both sides of the argument are more-or-less true and are equally valid. There is not a correct answer to the question of whether or not to use a CSS framework. The answer largely depends on the requirements of each project and the needs of each client.

As a consultant, my job is to advise my firm’s clients about best practices and to help them choose the technologies that are most suitable for their technical, functional and budget requirements. The decisions we make are driven by thorough research and evaluation of the client’s unique needs. We then choose the tool that best fits the needs of the project and client.

Why I am not Swayed by the Arguments Against Using Frameworks

Adherence to a set of ideologies for their own sake may make the developer feel morally superior but it doesn’t serve clients or end users very well. The only ideologies that matter are those of the web site owner who has to live with the final product and end user who has to use the final product. The end user’s opinion is the only one that really matters because he alone will decide whether or not the web site is sufficient to meet his needs.

The semantic web is sort of like jet packs. It’s a really cool idea and I can’t wait until we are all using them, but it’s not a reality yet. ID and class names in HTML markup have meaning only to a human reader, and even then only native speakers of the language in which they are written (almost exclusively English). There is no standard, universally accepted lexicon of IDs and class names. Since there is not a fixed and shared vocabulary of ID and class names, they cannot be truly semantic.

One can read through the markup and understand what “description” or “footnote” mean, but end users do not look at nor care about the markup or whether or not class names are semantic. Developers should try to make their markup as concise and coherent as possible, but not using a particular solution because it isn’t 100% semantic isn’t practical.

Clients typically don’t care how the job gets done – only that it gets done. Clients, like end users, are not concerned with technical implementation details. One can rightly argue that it is still the consultants obligation to do what is in the best interest of the client and end user, but the evidence in favor of semantic markup is not convincing and therefor is largely a matter of opinion.

Why I Think Using a Framework is Beneficial

Standards promote the use of a common language which helps improve communication and development efforts between designers and developers. In our practice, the design and implementation thereof on a typical web project looks something like this:

  1. Information architects create the structure and flow of the web pages based on the functional requirements
  2. Graphic/UI designers interpret the wire frames into a graphical representation
  3. Front-end coders develop the (X)HTML and CSS to support the graphics provided by the designer(s).
  4. Back-end developers convert the static (X)HTML files into working templates for whatever CMS or software platform is being used on the project.

The process described above can be tedious and error prone and requires a lot of communication back and forth between all parties involved. Using a standardized grid and agreeing on widths, relative sizes, etc. ahead of time saves a tremendous amount of time and eliminates ambiguity. Everyone knows exactly what the dimensions are before development begins.

A basic grid structure has been used for decades by the magazine and newspaper industries and for centuries by book publishers. The structure of these media enhances what we in the web world would call user experience because it aids in the legibility and comprehension of the content. The use of an underlying grid on web pages can also aid comprehension.

In my own experience, the time savings argument for using a framework has been true. Using the 960 Grid System framework has saved me a lot of time and headache on several personal projects, thus allowing me to put more effort into perfecting the design itself instead of wrestling with my tools. That being said, I also do plenty of projects on which I (or someone else) write all of the CSS from scratch.

Conclusion

There is not a right or wrong answer to the question of whether or not to use a CSS framework. The decision, as is the case with any other tool, should depend on the requirements of the project at hand and the needs of the client for whom the work is being done. The arguments against using a framework, while valid, are primarily ideological and do not demonstrate any adverse effects from using them. The benefits of using CSS frameworks are real, tangible and practical.

Popular CSS Frameworks

Leave a Reply

  1. I have used the blueprint CSS framework on my site. I must admit that the using the framework results in less clutter. I do not agree with third point against the framework. For example blueprint allows your to generate customizable CSS with pre-defined widths of your choice.

    • Madhur, you make a valid point. I think this article is about 18 months old and I’m not sure how much these frameworks have changed in that time. The developers of the various frameworks are constantly updating them and each one is different. I was speaking in the general case and not specifically about any one framework. And truth be told, I am a big fan of using them so that argument was really from the point-of-view of folks who are opposed to them.

      This article has been extremely popular so I’m planning to expand this comparison into a full section in which I will review as many frameworks as I can. There is some really interesting stuff being done with frameworks like Twitter’s Bootstrap which uses the Less CSS meta-language. I really like where that is headed because I think Less and similar technologies address quite nicely what I see as shortcomings in CSS.

      Thanks for participating in the conversation. I always like hearing other people’s perspective on technology. Cheers.

Webmentions

  • Should I Use a CSS Framework? – SkyBlueCanvas : SkyBlueCanvas February 17, 2012

    […] has posted a new article on CSS Frameworks titled Should I Use a CSS Framework?. The article evaluates the reasons both for and against using CSS Frameworks. – If you like […]

  • Should i use CSS Frameworks? « Cank goes Technical February 17, 2012

    […] Check out the best answer so far […]

  • CSS Framework Comparison « Technify.me February 17, 2012

    […] my last post, Should I Use a CSS Framework?, I presented an argument for using CSS frameworks on web site projects. In this post, I will […]