A view on CSS Frameworks

I’ve been reading the recent skepticism over CSS frameworks and I completely agree. I’m not completely sold on the Idea of universal frameworks for general use. Sure, good frameworks are very useful when programming or scripting just about anything. The big programming languages like Java and C# are more then just the languages really - both come with extensive and very useful frameworks to make programming easier and faster.

CSS frameworks aim to do the same thing to our styling. But the main thing I have against the Idea, which I also feel about resets, is that perhaps they add too much that isn’t needed.

I think most people won’t argue that the visual design of a website is very unique. I think most people also won’t argue against reusing CSS selectors for tabs any time tabs are needed. But if your website doesn’t make use of tabs, what is the use to have that in a CSS file that gets downloaded every page? This is exactly the same problem Javascript frameworks have - and though good front-end frameworks will be modularized to prevent against this, there may still be unused code or selectors in the modules that you end up including.

When I think of CSS I think of styling for a specific type of semantics that make sense only in the context of the information they will be styling. So for example, perhaps all tabs used in a website will be either secondary navigation, or navigation for a tabbed widget. Sure, they can use some of the same selectors, but while a framework may use a more generic name for the selector than what the tabs themselves are trying to emphasize. For example, you might want to name your selector .horizontal-nav as opposed to .tabs. Which makes more semantic sense in the example illustrated above?

Sure, you could always change the selector’s names in the framework, but then you aren’t getting the benefit of using a framework! The semantics and language of your site’s information will always be different then another’s site. Unless you are always building the same site template over and over again - lets say blogs that use the same semantics, then having a general framework probably won’t help much.

That’s not to say the idea is completely bad. While working at Alienware I had set up the site’s personal css styling framework. This included the proper naming convention for all the style sheets, each different area had it’s unique style sheet that covered only the semantics and language of that area, as well as the contents of the universal style sheet - that contained styles that were used by a majority of the pages in the site, including the font family and font sizes for certain type of tiles and the body text. This made it very easy to add different pages with a diverse multitude of supported semantics.

However, I wouldn’t want to use any of that CSS in my website. What would a selector called .pressreleaseheader mean or do in my own website? I don’t have or do press releases. And yes while Alienware does have many tabs, and my sites navigation could be considered tabs, not only is the styling different, but so is the semantics.

So, what I want to finish with is this:

  • Frameworks can be good - they give me WAFFy’s
  • General CSS Frameworks are probably too general to add semantic meaning unless you work with sites that have similar languages
  • Site Specific conventions and frameworks can help out in large enough sites
  • Like javascript frameworks, can be somewhat inefficient in the use of bandwidth - Including more then is needed.

These are just my opinions though. I am not trying to tell anyone General frameworks are bad, I am just exploring my feelings of unease about using them in my future projects.

September 20, 2007 10:25 PM HTML and CSS


Leave a comment of your own

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.

Use of HTML for comments is not available.

In an effort to combat spam, you will be able to post your comment after you preview.

Powered by Movable Type 3.2 Creative Commons License: Some Rights Reserved © 2000-2005

Site feeds. Hofully valid XHTML and CSS. No kitties were harmed in the making of this website.