Hmm interesting.
There is no right or wrong way to do these as far as I'm aware.
I use one definition per line, in a standard order (ish), all in short form.
I find it easier to scan down the page for class or id, then across for the
property and value.
Currently I'm thinking of separating colour from the standard sheet.
But only because we have a very large site and colour is used to indicate
sub-sections.
/* /folder/filename.css */
/* Browser & platform leveller */
* {margin:0; border:0 solid; padding:0; font:100.1% Verdana, Helvetica,
sans-serif}
html {height:100%}
body {width:???; min-height:101%; background:#fff; color:#000; margin:0
auto; text-align:center}
/* Element styling - font-sizing should go no further than this section */
/* block */
/* links */
/* lists */
/* form */
/* inputs assigned a class equivalent to type */
/* Global class styling */
.warning
.sorry
.autowide
.left
.center
.right
/* id block styling - in the order they appear on the page */
#accessibility
#banner
#search
#breadcrumb
#container
#navigation
/* content specific area */
#content
/* content specific area */
#footer
/* late additions are added at the end with author / date / page details */
____________________________________________________________________________________
Mike Foskett
Web Standards, Accessibility & Testing Consultant
Multimedia Publishing and Production
British Educational Communications and Technology Agency (Becta)
Milburn Hill Road, Science Park, Coventry CV4 7JJ
Email: [EMAIL PROTECTED]
Tel: 02476 416994 Ext 3342 [Tuesday - Thursday]
Fax: 02476 411410
www.becta.org.uk
____________________________________________________________________________________
-----Original Message-----
From: Hugues Brunelle [mailto:[EMAIL PROTECTED]
Sent: 07 April 2005 14:17
To: [email protected]
Subject: RE: [WSG] CSS Document layout/structure
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
******************************************************
**********************************************************************
This email and any files transmitted with it are confidential and
intended solely for the use of the individual or entity to whom they
are addressed. If you have received this email in error please notify
the system manager.
This footnote also confirms that this email message has been swept by
MIMEsweeper for the presence of computer viruses.
www.mimesweeper.com
**********************************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
