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.
- Previous post: TILT
- Next post: Webben är inte öppen för alla
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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.
grrr... it's very hard to illustrate things with ascii here.
parent {}
---#child {}
------#child h1 {}
------#child p {}
(---'s added for display here only)
I usually structure my CSS files like this:
Generic element styles (alphabetic element name order).
Styles for specific IDs (with child elements indented as Woolly Mittens described). The IDs are in the order they occur in the documents.
Styles for classes (alphabetic class name order).
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.
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).
I'm still waiting for a css editor that is able to show the depencies between several elements.
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.
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.
Sorry, comments are closed for this post.