This is a very interesting topic. As someone who has to write CSS for others
(both colleagues in the development team and others who know very little
about CSS), I have started to adopt a pseudo-"object-oriented" approach to
writing stylesheets.
First, I split the pages I have to code into smaller, reusable objects; I
then identify these with a class. All the required XHTML gets wrapped in a
div and the CSS for this placed in a group with docblock-style comments
describing the what the CSS relates to; e.g.:
/**
* class[.subclass]
*
* the following establishes styles for blah blah...
*/
.class h1
{
property: value;
}
.class h2
{
property: value;
}
/* end: class */
... And so forth.
I set the absolutely essential values within the class (i.e. not usually
font-size etc...), thus, as with OO-programming, large chunks of the CSS and
HTML for any page can be ripped clean out and reutilised wherever it is
required.
This approach does make the stylesheets rather verbose, but I've found it to
work quite well if others have to be able to understand and apply your CSS.
It also helps if the designs one is working to are quite "modular" in
style...
Chris
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Dr Christopher Townson
Web Design Department
Nature Publishing Group
The Macmillan Building
4 Crinnan Street
London N19XW
Tel.: +44 (0)20 7833 4644
Email: [EMAIL PROTECTED]
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Ricci Angela
Sent: 07 April 2005 12:30
To: [email protected]
Subject: RE: [WSG] CSS Document layout/structure
Hi!
I always do the same: I group styles of the same nature, beggining
by redefining default values where it is needed, and then by page structure,
main blocks, navigation, forms, etc. And I always keep the same sequency for
each definition (first positionning, dimensions, font, background,
margins...), for exemple :
{
position: (or float)
width:
height:
font:
background:
border:
margin:
padding:
}
etc
I believe it helps a lot in consulting the css.
Cheers!
Angela
-----Message d'origine-----
De : [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] la
part de Jacobus van Niekerk Envoy� : jeudi 7 avril 2005 12:09 � :
[email protected] Objet : RE: [WSG] CSS Document layout/structure
I normally write my css to follow the structure of the xhtml:
/* Main layout*/
...
...
/* Nav */
...
...
/* Sub nav */
...
...
/* Content */
...
...
/* Side Content */
...
...
/* Footer */
...
...
I also tend to split my css in different files.
structure.css - keep all structure css
Text.css - all text related formatting
Small.css - used in style switcher to set text to small
Medium.css - used in style switcher to set text to medium
Large.css - used in style switcher to set text to large
Hacks.css - any hacks I might use to help IE ;)
I am open to other methods or ways of doing this .... Let us have a chat
about this issue.
Kind Regards
Jacobus van Niekerk
Creative Consultant
............................
web: http://www.catics.com/ | http://www.freelancecontractors.com
tel: + 27 21 982 7805
............................
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of C Slack
Sent: Thursday, April 07, 2005 11:34 AM
To: [email protected]
Subject: [WSG] CSS Document layout/structure
Hi,
I am struggling to get to grips with designing with web standards and one of
the problems I am having is with "reading" style sheets.
Having sorted out the html code to make it more readable and modifiable it
seems that we have shifted the "mess" to style sheets. Many of the sheets I
look at are long, comment-less and very difficult to understand.
So that I don't fall into the same trap, can anyone recommend some reading
on how to make style sheet structure and layout both understandable and also
easily modified?
Thanks,
Charlie
--
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
--
No virus found in this incoming message.
Checked by AVG Anti-Virus.
Version: 7.0.308 / Virus Database: 266.9.4 - Release Date: 4/6/2005
******************************************************
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
******************************************************
********************************************************************************
DISCLAIMER: This e-mail is confidential and should not be used by anyone who is
not the original intended recipient. If you have received this e-mail in error
please inform the sender and delete it from your mailbox or any other storage
mechanism. Neither Macmillan Publishers Limited nor any of its agents accept
liability for any statements made which are clearly the sender's own and not
expressly made on behalf of Macmillan Publishers Limited or one of its agents.
Please note that neither Macmillan Publishers Limited nor any of its agents
accept any responsibility for viruses that may be contained in this e-mail or
its attachments and it is your responsibility to scan the e-mail and
attachments (if any). No contracts may be concluded on behalf of Macmillan
Publishers Limited or its agents by means of e-mail communication. Macmillan
Publishers Limited Registered in England and Wales with registered number
785998
Registered Office Brunel Road, Houndmills, Basingstoke RG21 6XS
********************************************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
