Structured css file

There is a lot to find about how to structure your css files but you have to find the best method for yourself.

With comments you can't go wrong. I use them like this

/*------------ generic --------*/

/*------------ div -----------*/

/*------------ span -----------*/

/*------------ title -----------*/

/*------------ paragraph -----------*/

/*------------ link -----------*/

/*------------ list -----------*/

/*------------ image -----------*/

/*------------ form -----------*/

/*------------ table -----------*/

This way you can find the css style by the function of the html tag and still add extra comment. To make it more readable I add the tag in front of the id or class selector when i have to use a parent element.

/*------------ div -----------*/
#content
    { width: 80%; }
#navigation
    { width: 20%; }
/*------------ link -----------*/
div#content a, div#navigation a
    { text-decoration: none; }
div#navigation a
    { font-weight:bold; }

The following advise you can see in the previous example. by indenting the actual style and putting it on one line you have a visual guidance and a compact css file. An additional advantage of seperating the selectors from the style is that you can have a line of selectors where the style is fully visible underneath. Of course you must be aware not to use to many selectors. In the example the first link selector can be

/*------------ link -----------*/
a
    { text-decoration: none; }

This works for me but different methods aren't wrong.