Grow your CSS skills. Land your dream job.

Trying a new CSS indenting scheme..

  • # October 10, 2009 at 8:54 am

    Previously I was an advocate of doing simple long line with no indenting in css, something like…

    Code:
    blah { width:10px; }
    bla22 { width:10px; height:; border:; }

    I think a fairly popular, but simple style.. Even with comments however I felt that that after the document got bigger and bigger it started being a lot more difficult to control. Im sure it also got more and more inefficiently written with repeating elements and crap.. and difficult to find specifics in the code.

    I had a look around the intarwebs, and looked at some styles, and I fancied trying some kind of tree indenting style, I was a programmer many years ago so it also kind of made more sense structurally than the straight list of rules.

    Code:
    /* Main Content Area */
    #hdr-content
    { background: #060d1f url(images/hdr-background.jpg) no-repeat; padding-top: 680px;
    overflow: hidden; position: relative;
    }
    /* Right Hand Content Area */
    #hdr-right
    { float: left; width: 670px; padding-left: 25px;
    }
    #hdr-right p
    { color: #fff; font-size: 0.8em;
    }

    #hdr-right h2
    { margin-top: 25px;
    }

    .pic1, .pic2
    { height: 209px; padding-top: 80px; margin-top: 15px; margin-bottom: 25px;
    }

    .pic1
    { background: url(images/hdr-pic1.jpg) no-repeat right 0; padding-right: 480px;
    }

    .pic2
    { background: url(images/hdr-pic2.jpg) no-repeat left 0; padding-left: 480px;
    }

    #hdr-right blockquote
    { background: url(images/quotes.png) no-repeat 20px 10px; padding: 10px 10px 10px 90px;
    margin-bottom: 25px; display: block; color: #fff; font-size: 0.9em; font-style: italic;
    }
    #hdr-right blockquote br
    { margin-bottom: 25px; display: block;
    }

    /* Left Hand Content Area */
    #hdr-left
    { float: right; padding-right: 25px; width: 190px;
    }
    #hdr-left p
    { color: #fff; font-size: 0.7em; color: #778;
    }

    #hdr-left h2
    { color: #889; margin-top: 15px;
    }

    #hdr-left h2.topper
    { font-size: 1.1em; margin-top: 0px;
    }

    /* Cart Links */
    #cart
    { position: absolute; top: 10px; right: 5px;
    }
    #cart a
    { background: #eee; padding: 4px 12px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    font-size: 0.7em; margin-right: 5px;
    }
    #cart a:hover
    { background: #e78221; color: #fff;
    }

    heres an example of what I’ve been trying, what do you think? It kind of sucks that it wraps when pasted on here at some points, but you can get the general idea.

    does it make things needlessly more difficult? or easier to read/traverse?

    Not 100% sure, I thought it wasn’t bad, but at the same time it does make it look more complex than a CSS list actually is :D More complex but also more elegant a solution.

    One problem I forsee with an indented child structure is what to do when doing a multi selector for elements who exist in different parts of the tree.. it would break the notation unless you simply repeat yourself.

    What do you guys think? and what kind of notations do you use for your css

    edit: i took a screenshot of the notation in my editor cause it doesnt look perfect pasted in the code box:

    [img]http://www.ninjafocus.com/sandbox/css-indent.png[/img]

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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