Grow your CSS skills. Land your dream job.

Organising your CSS

  • # February 12, 2009 at 9:31 am

    Hey guys, I’m attempting to tidy up my code at the moment and I’m interested to know how everyone manages their CSS. I’m trying to find the best, logical way of doing so.

    Here’s my CSS from my recent website:

    http://css.pastebin.com/m4cefc1f5 (it’s all over the place & it doesn’t validate at the mo :oops: )

    As you can see I’ve tried to add a typography section but I find when I was playing around with the styling to see how things looked it seemed much more logical to have sections of style that related to section of content. Instead of having to update multiple sections of code.

    For example, I have a flickr widget that has my photos, a title etc. To update the font, background colour, structure etc I’d much rather go to one section in the CSS to do that then alter the typography in one area, then the structure in another and so on.

    I’m interested to read your thoughts on this process.

    # February 12, 2009 at 11:22 am

    this is personal I think,

    what I normally do, comment it all out, and try to make sure it is sort of logical, for example, body, wrapper, header, sidebar, mainbody, footer, and have all of their css within those area.

    then any other stuff comment it as such, hopefully it all goes hand in hand, but if it is only you that is going to be loking and updating the code, then somehting you understand is beter

    # February 12, 2009 at 1:01 pm

    Mine goes a little something like this:

    /*
    Name
    Website
    Date

    Colors used
    #fff – white – main text
    #000 – black – body background
    #ff0000 – red – main text link
    etc etc
    */

    1. Reset

    2. All General styles go next (p, a, h1, h2, h3, floats, line breaks, etc)

    3. Section Specific (In display order, header first, main, footer…)
    – all section specific tags will go in here, so if the footer has a different p tag, that would go in the footer section

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

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