views:

395

answers:

6

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!

+1  A: 

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.

bLee
While I agree that rolling your own CSS is more maintainable then using a CSS Framework with arcane class names, I wouldn't go as far as saying not to use it. Like anything else, it is a tool, one which can be used correctly and incorrectly. For one, they are good for rapid prototyping. But I wouldn't personally use them for production code.
Andrew Moore
@Andrew Moore: That's why I say use it as a reference. Rapid prototyping won't be so "rapid" if the person doesn't know all the elements that CSS frameworks offer. When you are doing UI, you know what you want or how things should look like. It may take longer to use the framework and figure out what to use.
bLee
For me personally, use a framework has been a lifesaver working on a sprawling site at work. Sometimes a generic class name like grid_6 really helps.
pegasus4747
+3  A: 

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.

DanDan
+4  A: 

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.

Martin Liversage
Exactly, that's completely valid and it's indeed a good practice to use multiple classes to avoid repeating CSS.
kuroir
Yes, it's technically valid. It's not semantically valid though. Those class names do nothing to describe what they are, only what they should look like. It's a trade off you make with CSS frameworks.
John Sheehan
Is not about broking the web standards. It's all about semantics. div class="last" will tell you that that div is last. But what "span-24" will tell you? :)
Ionut Staicu
+8  A: 

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 redfining 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.

Elocution Safari
A: 

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 :/)

+1  A: 

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.

nicholaides
Thanks for the link nicholaides. I don't have time right now to watch the vid, etc., but this does look very interesting and semantically, um, cool!
Rob
Yup, this is cool. I think I'll give it a whirl for my next project! Thanks again for the link.
Rob