CSS Frameworks & “Semantic Naming”

Question

I've looked at two CSS frameworks that could save me a lot of time (Blueprint, 960gs) but have questions on how to use them and comply with web standards. For example, Blueprint has things like:

<div class="span-24 last">

and 960gs like: <div class="grid_6 prefix_3 suffix_3">

This doesn't personally bother me, but I've seen mention that using these non-standard names for classes is not advised and goes against web standards. As more of a back-end developer, I'm not up on the latest Web Standards, accessibility, etc., but I'd like to at least stay somewhat compliant. Would simply adding meaningful ids work? Like: <div class="grid_12" id="menu"> Is there a best practice when using CSS frameworks like these?

Note: I also like nicholaides's suggestion of using Compass/Sass!

Answer 1

I think you're confusing a style argument with a standards argument. There are people who argue that when creating a class you should call it 'headline' and not 'blue' - simply because if the headline needs to become green, you have to change the class definition AND the HTML rather than just redefining the 'headline' class. That's a personal preference, it's good style, but not related to any standards.

There are no 'standard' names for classes, you can call them anything you want, so I wouldn't worry about naming classes any particular way from a technical standards perspective.

Additionally, since the classes that a CSS Framework create aren't meant to be edited by humans, but only used in the context of the framework, their lack of semantic meaning is irrelevant outside the framework.

Answer 2

I don't see how

<div class="span-24 last">

and

<div class="grid_6 prefix_3 suffix_3">

fails to comply with web standards. This is simply multiple classes assigned to a single element.

Answer 3

In the long run, your saved time will be lost. You may find yourself forever flipping between your css and your html, trying to remember what "grid_6" is. Descriptive class names will help a lot.

Answer 4

Check out Compass.

It uses Sass (which compiles to CSS) and that uses features from a number of popular CSS frameworks. (It's not as scary/bizarre as it sounds. Sass is a great replacement for CSS even without the CSS framework support.)

Instead of doing

<ul class="column_6">...</ul>

You do:

ul.naviation
  color: #fff
  +column(6)

which compiles to

ul.navigation {
  color: #fff;
  /* all the rules for the 6th column a placed here */
}

You can take advantage of CSS frameworks while keeping your markup clean and semantic.

Answer 5

Don't use CSS Framework
because your website will not use everything the framework offers.

It is just good to take it as a reference and write your own CSS.
It will be easier to maintain, and your css file will be smaller.

Only part I would use is..the reset.css file from 960.gs
The reset css file is widely used to remove all the default white spacing with DOM elements.

Answer 6

You could try naming elements with id of upcoming html5 name specifications: hml5 sheet which is pretty wide specified for use everywhere. If you stick to this naming conventions you should mediately remember purpose of design element. If more precision is needed try to use some human readable format that you will understand - your writing comfort is key to quality code.

If you are interested more in that topic read full article on smashing magazine "html5 and the future of the web" ( google it: new user link limit :/)