Indenting CSS

I was doing an interview this morning, and the canidate was showing me some CSS code, and she had indented the CSS according to the depth of the selectors involved.


table.data_table {
}
    table.data_table tr {
    }
        table.data_table tr td {
        }
    table.data_table tbody {
    }
        table.data_table tbody td {
        }

I'm tried indenting a few stylesheets of mine, and I was surprised at how much more readable the CSS was. I was also surprised that I had never ever once considered indenting the rules as a whole.

Posted May 8th, 2007 at 2:20 pm by Ryan in Design

Replies to this Post

I had the idea of nestled CSS rules, like so:

#sidebar {
    width: 33%;
    float: right;
    ul {
        list-style: none;
        a {
            color: #f00;
        }
    }
    div.side_item h3 {
        font-size: 16px;
    }
}

I think it would make CSS much nicer to write and read.

Posted May 11th, 2007 at 1:20pm by SamKellett

That's a great idea, Sam!

Posted May 14th, 2007 at 10:43am by bbodien

It may make it 'nicer' to read and write, but what happens with you want to apply the same style to various elements that are nested in different locations?

Posted May 21st, 2007 at 11:13pm by gordo

I always left the closing bracket indented as I found it improved readability, but when combined with nesting it looks sweet.

Since I am currently creating a small site, I am trying to nest the stylesheet as follows:

div#box {
    background-color: #FFF;
    border: 1px solid #2E5E81;
    margin: 50px auto 0 auto;
    width: 790px;
    }
    div#top, div#bottom {
        background-color: #ADDCFF;
        height: 25px;
        line-height: 25px;
        }
    div#main {
        background: transparent url(../images/background.png) 10px 10px no-repeat;
        height: 500px;
        }
        div#content {
            background-image: url(../images/png/50.png);
            height: 500px;
            margin: 25px 25px 25px 395px;
            padding: 10px 10px 10px 10px;
            }

Associated (X)HTML fragment:


<body>
    <div id="box">
        <div id="top">
        <div id="main">
            <div id="content">
        </div>
        <div id="bottom"></div>
    </div>
</body>

By the way, I am getting the following message, which you probably won't see assuming is___admin is defined on that side of the fence. 

Notice: Undefined index: is_admin in /home/livepipe/public-html/models/User.php on line 14

Posted May 25th, 2007 at 9:27am by

Posted July 24th, 2007 at 1:45pm by

Posted July 24th, 2007 at 1:51pm by

Posted July 24th, 2007 at 2:02pm by

Posted September 29th, 2007 at 7:58am by

Login or Register to Post