|
To add to readability of your css you should also consider the layout
of the individual css rules as well as their
organisation/categorisation. Using typical whitespacing that applies to most coding standards you can come up with the usual layout: .className { property: propertyValue; property: propertyValue } The four spaces (not tabs) before each property are vital for viewing correctly on all platforms (vi, etc). Also, the space between the colon and the value are also add to the readablity as well. I always put an extra line break in my declations, though (this extends to all code I write) making something like the following: .className { property: propertyValue; property: propertyValue } I also place a new line between each rule, seperating them out: .className { property: propertyValue; property: propertyValue } #idName { property: propertyValue; property: propertyValue } White space is a very personal thing, I feel. What you can read easiest depends entirely on what you're used to. ~Dave Hugues Brunelle wrote: Hi Charlie, I know what you mean, I did many redesign stuff and find out that I wasn't able to understand my own css file (that was awful). You can see a sample at http://www.echo3d.com/css/screen.css It "looks" complex but if you pay attention, you'll see that everything is in order.Here is some simple rules I apply and know what? I am not lost anymore in my CSS :) Hugues Brunelle Concepteur graphique ////////////////////////////// ECHO tridimension 2139 rue Masson Montréal QC H2H 1A8 1-(514)5211360 [EMAIL PROTECTED] 4 simple rules : 1.0 Divide your one and only (I split CSS only for different media, not for different part of design.) CSS structure into 3 main themes like /* GENERIC ELEMENTS : HTML 4.01 */ /* SPECIFIC ATTRIBUTES : ID */ /* RECURRING ATTRIBUTES : CLASS */ 2.0 Use alphabetic because code should not rule the way you design (think about when you start shifting stuff on top and moving others on bottom) /* GENERIC ELEMENTS : HTML 4.01 */ a { } abbr { } acronym { } /* SPECIFIC ATTRIBUTES : ID */ /* RECURRING ATTRIBUTES : CLASS */ 3.0 Make good use of descendant selectors /* GENERIC ELEMENTS : HTML 4.01 */ a { } abbr { } acronym { } h1 { } h1 em { } h1 em a { } /* SPECIFIC ATTRIBUTES : ID */ /* RECURRING ATTRIBUTES : CLASS */ 4.0 Choose the appropriate terminology to keep alphabetic order logical and respect it no matter what (avoid terms like "red-text" or "1em" in your class or id name) /* GENERIC ELEMENTS : HTML 4.01 */ a { } abbr { } acronym { } h1 { } h1 em { } h1 em a { } /* SPECIFIC ATTRIBUTES : ID */ div#content { } div#content_body { } div#content_foot { } div#content_head { /* RECURRING ATTRIBUTES : CLASS */ ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ****************************************************** --
|
<<inline: eDave.gif>>
