Toolbox CSS
Over on Tutorial Blog, I shared my “Toolbox CSS” that I like to use:
What is Toolbox CSS?
Toolbox CSS is styling information that has nothing uniquely to do with any particular website. These are a collection of common styles that can be useful on any web project. How many times have you written a class for clearing a float? Too many, is my guess. The idea with Toolbox CSS is to include a separate stylesheet for these “utility” styles.
Loading ...
1
Tutorialblog is not reachable here at the moment, but it was allready loaded in my rss. Good toolbox
Some of them I allready used. It’s very handy to have a toolbox indeed! 
Comment by Edwin — May 7, 2008 @ 8:29 am
2
great stuff Chris! I love the stuff you put together as “cheat sheets”, it’s those things that seem so necessary as we redo stuff ALL OF THE TIME, but we rarely take the time to do something like this and instead just opt to complain everytime we are doing the rework.
Thanks for the goodies!
Comment by bolo — May 7, 2008 @ 8:45 am
3
Using generic classes like that is like using inline styles.
From a point of view of maintability, there is no differences between :
and
This is instrusive code, and absolutely not recommanded by the W3C
The day you’ll decide to change all your floatRight’s into Left’s, have fun.
Please take a look at that :
http://www.w3.org/QA/Tips/goodclassnames
Comment by Yves — May 7, 2008 @ 9:11 am
4
Ok seems the code tag don’t work …
well I meant between … style=”float:right” and class=”floatRight”
Comment by Yves — May 7, 2008 @ 9:13 am
5
“The day you’ll decide to change all your floatRight’s into Left’s, have fun.”
It’s not ideal, but with my way could simply flip the float direction in the CSS. If we use inline styles like you suggest, we’d have to manually change the style on every single element. I agree that sometimes inline styling is fine, and class names like “redborder” are stupid, but floating isn’t one of these.
Comment by Chris Coyier — May 7, 2008 @ 9:19 am
6
I have to agree with Yves on this one, by using classNames in your HTML that describe positioning or layout you are undermining the core principals of the separation of HTML and CSS.
However I do think that adopting a standard class naming system for yourself as a designer along with a standard CSS snippet collection is a good practice to keep. An example would be say for menus;
You have a base CSS file containing cross browser CSS that formats UL.menu into accessible link menus and then you simply include an extra CSS file to add color, font and other such site specific style. If you find a better way to support multiple browsers in the future simply update your base CSS file.
So I agree with your thinking, just not your actual usage.
Comment by matt smith — May 8, 2008 @ 1:24 am
7
I agree with Chris. I prefer to use names like ‘right’ and ‘left’ as class names for basic things like floats. It makes things easier to read, and normally it’s not that big of a deal to do a find-and-replace if you have to.
Comment by Freelance Web Design — May 14, 2008 @ 12:03 pm