3by9

.container {
     margin: 0 auto;
     ... }

    .container .insidethecontainer {
        padding: 15px;
        background: #f3f3f3;
        ...  }

            .insidethecontainer em {
                font-style: none;
                color: #000;
                ... }

    .container .anotherinsidediv {
        padding: 5px 10px;
        border: 2px solid #ccc;
        ... }

The .insidethecontainer style is indented underneath its parent, and then styles within .insidethecontainer are indented one more level. The indenting of child rules helps set up a visual hierarchy which is really handy when you’re dealing with 1000-line CSS files since they can get unruly pretty quickly. Using descendant selectors lets you directly target certain elements in the page, and indenting parent -> child relationships lets you quickly find the larger container elements amongst the smaller styles.

Also, when you’re setting up multiple unordered list navigation styles on a page, you’re doing the same ul -> li -> a > progression over and over. With the indentation technique, it’s a lot more organized.

7. Double Up Your Container DIVs, If Needed

Something that I’ve only been doing in the past 6 months or so is the “doubling up” of DIVs for larger, container elements on the page. Here’s some XHTML:

<div class="main_container"><div class="container_inner">
    Stuff would go here...
</div></div>

This has been useful to me in some situations where I have some fairly complex styles attached to the main block (in this case .main_container) and I just can’t make it work without another DIV’s background or border style to use as well. Things like four rounded corners (height-expandable) are easy with two DIVs inside of one another: put the top rounded corners on .main_container and the bottom rounded corners on .container_inner and you’re good to go. If you want a double border effect (potentially coupled with a colored padding effect, which would emulate a triple border) then doubling up your container DIVs makes this trivial.

Another advantage to doubling up your DIVs is that you can now use padding on the inner block instead of the outer block, keeping your widths more easily managed. No more double-margin bug in IE6 since you’re moving the margin of the outer container into the padding of the inner container.

If you’re not doing complex styles on a larger container block then there’s no need to double up as it just clutters up your XHTML, but give them a try on more complicated layouts. They make things a lot easier.

8. Don’t Design For CSS, Just Design

I feel that limiting the visual look of your interface because it’d call for complicated CSS is a big mistake. I was guilty of this when I first started learning CSS about 6-7 years ago, and I purposely “dumbed-down” my layouts because I was still learning how to make things work in CSS. I made things look boxy because when you’re first starting out, everything you make with CSS is basically a glorified box. Because of this I didn’t really expand my horizons for awhile, and it took a few years for me to really feel knowledgeable about floats, positioning, clearing, etc., all things I tended to avoid when I first started out.

Now that I’m about as comfortable writing CSS as anyone could be, I don’t even think about the code while I’m designing. Well that’s not true, I live and breathe CSS rules, but at least I don’t stop myself from pursuing a particular layout because I know I’ll have to jump through some hoops. Learning CSS by figuring new things out is the best way to become proficient, so don’t be scared, everything is possible — you may just have to rack your brain a bit before you figure it out.

9. Use Absolute Within Relative To Kick Ass And Take Names

The great Doug Bowman made me aware of this technique in 2003 and I’ve been using it ever since. If you know about absolute positioning within CSS then you’re aware that your origin point — top-left, top-right, bottom-left, bottom-right depending on your CSS rules — is your reference point for where your element will be placed. The problem with absolute positioning (that you’ll quickly find out) is that it’s pretty useless by itself for any real-world layouts. This is where absolute within relative comes into the picture.

If you set an element to have relative positioning then anything inside of it will have their origin readjusted based on their parent container, not the full window. This now allows you to set position: absolute; on elements within your relatively positioned container, and their origin is based on the dimensions of the parent, allowing for many new possibilities. For example, if you have a complex layout with elements positioned at the top, bottom, left, and right of a box, this is much handier than trying to float everything. Slap position: relative; on the container, and then absolutely position all elements within and you can knock out a precise layout in minutes with very little stress.

This is how the pros do it, and it’s the best tip on this list if you’ve never used it before.

10. Reward Better Browsers

Lately I’ve been having a lot of fun with the more advanced CSS styles that only better browsers like Safari, WebKit, and Firefox support.

WebKit supports many interesting properties, here’s a short list:

• Text Stroke including transparently-colored text
• Box Shadow
• Reflections
• Alpha Masks
• CSS Gradients
• Border Radius, aka, rounded corners

Firefox supports rounded corners as well, however the rendering is choppy compared to Safari/WebKit’s smooth-as-silk corners. The WebKit team, more specifically the genius Dave Hyatt, has been working diligently to make WebKit (and most likely the next version of Safari) the most advanced web rendering platform out there, and they’re certainly succeeding.

To use Firefox or Safari/WebKit-specific CSS rules, you’ll need to use the -moz or -webkit rule prefixes for the browser to understand what you’re trying to do. In certain parts of the new 9rules I’ve used CSS-based rounded corners and my CSS looks like this:

.main_content .comm_member_block ul li span.top a {
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px; }

As you can probably figure out, that style makes both top corners of the block have a 6px radius, but the exact syntax for making this work in Firefox and Safari/WebKit is different, thus the need for the multiple rules. Hopefully when these browsers support the CSS3 version of these styles then a standardized syntax will exist, but until then, that’s how you do it.

This brings up the issue of CSS validation as the dash prefix before a rule is invalid. Personally, I don’t care about having my stylesheet validate as long as I know that the places where it doesn’t validate are rules I consciously know what is going on. If I’ve goofed up on a style or forgot a semicolon after a rule, most likely I’ll figure that out by refreshing the page so I don’t need a validator to point that out to me. If your boss requires you to keep your CSS completely valid then stay away from these interesting techniques. If you’re willing to have a little fun and show a small percentage of your readership something slightly more interesting than the normal design, then go ahead and have your fun.