Grow your CSS skills. Land your dream job.

Toolbox CSS

Published by Chris Coyier

toolbox-css-csstricks

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.

View Article on Tutorial Blog

Direct Link to CSS File

Comments

  1. Edwin

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

  2. bolo

    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!

  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

  4. Ok seems the code tag don’t work …
    well I meant between … style=”float:right” and class=”floatRight”

  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.

  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.

  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.

  8. xbakesx

    I was looking through your toolbox.css file, and realized that you have a small mistake on one line (I don’t know if any css interpreter will ever have a problem with this, but it couldn’t hurt to fix):

    a[href~=”.pdf]

    but it should be this:

    a[href~=”.pdf]

  9. @xbakesx: Thanks. I had that fixed in the original Tutorial Blog article, but forgot to fix the live example.

  10. jitendra
    Permalink to comment#

    Styling Extras are using CSS3 selector not supported by IE^

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".