Web Design

CSS frameworks and semantics

Sam Hardacre

• 1 min read

A couple of months ago, I was having a chat on Skype with Toby Howarth about various web-related things, one of which was CSS frameworks. It was quite late and I was just about to head to bed so I only wrote a quick reason why I'm not a particular fan of most and he asked me to elaborate. I've finally got around to it...

When I first started to build web sites in 2003, I wasn't really aware of Web Standards but it wasn't long until I caught the bug and I started to read blogs and books to get up to speed. I became accustomed to thinking about markup in a certain way. Separate structure from presentation. Write well structured, semantic markup.

After ten years, I find it difficult to work any other way. I always try to keep markup as tidy as possible, only using extra markup when absolutely necessary and keep classes and IDs meaningful and related to the content.

When I look at the documentation of CSS frameworks, I can't shake the feeling that the markup required flies in the face of it all. Presentational class names are assigned to elements to form columns and in some cases, extra elements are added to create rows... To me it feels like taking a step back.

As Responsive Design processes become more and more common on projects, I think it's more important than ever to retain the principles of Web Standards. How much semantic value does a class like grid_3 retain once it's stacked into one column for a mobile device? Even responsive frameworks using relative values like grid-25 (meaning 25% of parent element's full width) still suffer the same issue when taking semantics into account.

It's our responsibility as web developers to keep standards alive. We shouldn't let convenience and speed get in the way of well structured, semantic HTML.

So, if your framework of choice follows similar conventions to the ones mentioned previously and you also feel we are sacrificing semantics, perhaps on your next project try something like semantic.gs to see if it helps strike a balance between the semantics and convenience.