CSS Organization Tip 1: Flags

In CSS Organization Tip 1: Flags, Doug Bowman explains the technique he uses to make navigating between different sections of CSS files easier.

This is something I need to get better at. I start out each project keeping things organised, but never seem to be able to keep it up until the end. Good. More things for my to-do list.

Posted on May 3, 2005 in CSS, Quicklinks

Comments

  1. May 4, 2005 by Woolly Mittens

    Do you know what also makes a world of difference? Using tabs to shift the children further than the parents.

    parent {}

    #child {} __#child h1 {} _#child p {}

    (_’s added for display here only)

    That way you can spot the root elements at a glance.

  2. May 4, 2005 by Woolly Mittens

    grrr… it’s very hard to illustrate things with ascii here.

    parent {}

    —-#child {}

    ———#child h1 {}

    ———#child p {}

    (—-’s added for display here only)

  3. May 4, 2005 by Tommy

    I usually structure my CSS files like this:

    1. Generic element styles (alphabetic element name order).

    2. Styles for specific IDs (with child elements indented as Woolly Mittens described). The IDs are in the order they occur in the documents.

    3. Styles for classes (alphabetic class name order).

    4. Rules for combinations of selectors (e.g. h2+p).

    Sometimes I have structured the rules according to their use (e.g. positioning, typography). Depending on the style sheet, this can sometimes reduce the size by half.

  4. May 4, 2005 by Jens Meiert

    You could use selectors to sort your style sheets (as I prefer, indicated in my original article comment), as you could also create specific functional sections. One should specify guidelines for this (…thinking about publishing some guidelines I once wrote, too, since it might be an alternative advancement).

  5. May 4, 2005 by Lud

    I’m still waiting for a css editor that is able to show the depencies between several elements.

  6. May 4, 2005 by Milan Negovan

    In Visual Studio.NET (much like in almost any code editor) and can set apart a code region (#region … #endregion) which you can expand and collapse. Helps a ton with large source code files.

    I wish CSS editors had this kind of convention so you could jump from over region to another in a way Doug described.

  7. May 6, 2005 by Roger Johansson (Author comment)

    Woolly: Sorry about that. Check the Markdown syntax to understand what happened ;-).

    Milan: There are text editors that will let you do that. I remember coming across that feature some time ago when I was trying out a bunch of editors, but I can’t remember which one it was. It’s a nice feature.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.