Re: [WSG] CSS Document layout/structure
I think it's a very intresting question! :) We always talk about clear coding in xhtml, but which is the best way to write a css? I think this could be a starting point discussion.
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: wsg@webstandardsgroup.org 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 **
Re: [WSG] CSS Document layout/structure
And what about the properties order? Generally I use to do something like this:
a {
font:1em sans-serif; color:#333; font-weight:bold;
text-decoration:none;
margin:1em; padding:0.5em;
background:#ddd; border-bottom:1px solid #ccc;
}
First I set the font and text properties, than the margin-padding and -
when used - the width-height properties. Than I go with background and
border.
Where can I put floats, positioning or clears?
I agree with a separation in more than one css, but not so separate! :)
Maybe smal, medium and large could be joined in an only one file.
Isn't it?On Apr 7, 2005 12:08 PM, Jacobus van Niekerk [EMAIL PROTECTED] wrote: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 cssText.css - all text related formattingSmall.css - used in style switcher to set text to smallMedium.css - used in style switcher to set text to mediumLarge.css - used in style switcher to set text to largeHacks.css - any hacks I might use to help IE ;)I am open to other methods or ways of doing this Let us have a chatabout this issue.Kind RegardsJacobus van NiekerkCreative Consultantweb: http://www.catics.com/|http://www.freelancecontractors.comtel: + 27 21 982 7805-Original Message-From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]] OnBehalf Of C SlackSent: Thursday, April 07, 2005 11:34 AMTo: wsg@webstandardsgroup.orgSubject: [WSG] CSS Document layout/structureHi,I am struggling to get to grips with designing with web standards and one ofthe problems I am having is with reading style sheets.Having sorted out the html code to make it more readable and modifiable itseems that we have shifted the mess to style sheets. Many of the sheets Ilook at are long, comment-less and very difficult to understand.So that I don't fall into the same trap, can anyone recommend some readingon how to make style sheet structure and layout both understandable and alsoeasily modified?Thanks,Charlie--**The discussion list forhttp://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 forhttp://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help**
RE: [WSG] CSS Document layout/structure
C Slack
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?
In general, it's a good idea to stick to some form of style guide
(essential when more than one person is working on styles, or if
it's likely that somebody else will inherit responsibility of those
styles in future).
In general, I try to stick to simple things such as:
- sensible indenting
one liners for really short and sweet ones
selector { rule; }
proper formatted block for more convoluted ones
selector { rule;
rule;
rule;
rule;
}
- striving to use the same order in which rules appear
selector { font: ...; color: ...; margin: ...; padding: ...; etc }
- use comments whenever something obscure / counterintuitive happens
(particularly if it's a hack)
- order your css into sections (general, header, navigation, etc)
as they appear in your XHTML; there is another school of thought
that prefers to order the css alphabetically by selector. personally, i
find this more counterintuitive (as you often fail to see the inheritance
and cascade clearly), but if it works for you, that's another way to
go about it
- use descriptive, but not overly wordy IDs and classnames
- split up your stylesheet into separate stylesheets when appropriate
- optimise, optimise, optimise: take advantage of inheritance and cascade
- related to the previous: avoid classitis and IDitis (or whatever
we want to call it); know your cascade and inheritance, and don't stick
a class or ID on every single element of your document
I seem to remember Malarkey http://www.stuffandnonsense.co.uk had an
article about this sort of thing a few months back...but the URL escapes me...
Patrick
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] CSS Document layout/structure
Jacobus wrote: 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 have my CSS split up according to task. I begin with a very bare-bones CSS file called via link which then contains @imports for the following: layout.css controls the structure. typography.css anything to do with fonts, decoration, etc. colour.css just what you'd imagine. In each file, the structure tends to mimic the flow of the document. I find separating the styles like this can be useful when I need to go back later to change something small. If it's the colour of a specific element I need to change, I know exactly where to make the change. There are some fuzzy areas though. If I add margins to an element, should that go in layout or typography? Margins, paddings and borders are kind of grey areas, I find. -- Jeremy Keith a d a c t i o http://adactio.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 **
Re: [WSG] CSS Document layout/structure
Thanks Patrick and others.
For the record I think that the Malarkey URL you refer to is:
http://www.stuffandnonsense.co.uk/archives/stylesheet_ordering.html
It has given me lots of things to think about.
Regards,
Charlie
Patrick Lauke wrote:
C Slack
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?
In general, it's a good idea to stick to some form of style guide
(essential when more than one person is working on styles, or if
it's likely that somebody else will inherit responsibility of those
styles in future).
In general, I try to stick to simple things such as:
- sensible indenting
one liners for really short and sweet ones
selector { rule; }
proper formatted block for more convoluted ones
selector { rule;
rule;
rule;
rule;
}
- striving to use the same order in which rules appear
selector { font: ...; color: ...; margin: ...; padding: ...; etc }
- use comments whenever something obscure / counterintuitive happens
(particularly if it's a hack)
- order your css into sections (general, header, navigation, etc)
as they appear in your XHTML; there is another school of thought
that prefers to order the css alphabetically by selector. personally, i
find this more counterintuitive (as you often fail to see the inheritance
and cascade clearly), but if it works for you, that's another way to
go about it
- use descriptive, but not overly wordy IDs and classnames
- split up your stylesheet into separate stylesheets when appropriate
- optimise, optimise, optimise: take advantage of inheritance and cascade
- related to the previous: avoid classitis and IDitis (or whatever
we want to call it); know your cascade and inheritance, and don't stick
a class or ID on every single element of your document
I seem to remember Malarkey http://www.stuffandnonsense.co.uk had an
article about this sort of thing a few months back...but the URL escapes me...
Patrick
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
--
Charles Slack,
15, Higher Greenfield,
Preston,
PR2 3ZX
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
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
À : wsg@webstandardsgroup.org
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: wsg@webstandardsgroup.org
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
**
Re: [WSG] CSS Document layout/structure
On Thu, 07 Apr 2005 10:33:58 +0100, C Slack [EMAIL PROTECTED] wrote:
I group and sort properties in rule like this:
selector {
positioning; floats;
width; height;
margin; padding;
border;
color; background;
text-; font-;
}
For programming languages I prefer Allman style of braces, but for CSS KR
style
saves precious space and clarity doesn't suffer that much.
If rule has few properties I usually type it in one line:
* html foo {height: 1%; margin-left: -3px;}
In stylesheet I generally sort rules by selector (cascade value).
Simplest selectors (body, h1, a, hr, form) go on top
and then more specific rules (#menu, #sidebar, #sidebar foo.bar) follow.
I make one general stylesheet that applies to all pages
and, when neccessary, add second stylesheet with specific rules for page
or group of pages.
I've implemented preprocessor for CSS (in PHP + apache mod_rewrite)
that allows me to use variables and math expressions:
#menu {
width: [$menuwidth-$menupadding-2*5px];
padding: $menupadding;
border: 5px solid red;
}
(ofcourse that is evaluated before sending to the client)
--
regards, Kornel Lesiski
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] CSS Document layout/structure
On Thu, 07 Apr 2005 12:44:52 +0100, Piero Fissore [EMAIL PROTECTED]
wrote:
#menu {
width: [$menuwidth-$menupadding-2*5px];
padding: $menupadding;
border: 5px solid red;
}
Mmm, cool! But does it really help you?
During development - a lot.
I usually put menu after content in document - this means that I need to
position it absolutely below page logo and reserve some space under the
logo.
That's a lot of repeated and cross-referencing dimensions and many of them
are changed to accomodate paddings and borders.
Without expressions, if I wanted to make logo or menu taller, I've had to
find and recalculate many properties scattered around document.
--
regards, Kornel Lesiski
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] CSS Document layout/structure
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: wsg@webstandardsgroup.org
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 À :
wsg@webstandardsgroup.org 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: wsg@webstandardsgroup.org
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
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
**
Re: [WSG] CSS Document layout/structure
Hi!
I split the rules into different files:
general.css
layout.css
elements.css
In these files I try to use container centric selectors. That
means: if the XHTML is structured like this:
div id=container1
div id=container2
div id=container3
p/p
/div
/div
/div
If it makes sense I try to include as much of the cascade as
possible:
#container1 #container2 #container3 p { ... }
This way it is much easier to identify which rule belongs to the
specific container and where to find it in the pages source.
I try to keep some order when defining the properties, but... I'm
just too lazy ;-)
Martin
Am Donnerstag, 7. April 2005 um 11:33:58 haben Sie geschrieben:
CS Hi,
CS I am struggling to get to grips with designing with web standards and
CS one of the problems I am having is with reading style sheets.
CS Having sorted out the html code to make it more readable and modifiable
CS it seems that we have shifted the mess to style sheets. Many of the
CS sheets I look at are long, comment-less and very difficult to understand.
CS So that I don't fall into the same trap, can anyone recommend some
CS reading on how to make style sheet structure and layout both
CS understandable and also easily modified?
CS Thanks,
CS 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
**
Re: [WSG] CSS Document layout/structure
On Thu, 7 Apr 2005 14:22:04 +0200, Martin Heiden wrote: I split the rules into different files: general.css layout.css elements.css Are you seeing much overhead in load time? I've put off doing the same for that reason. Lea -- Lea de Groot Elysian Systems - http://elysiansystems.com/ Brisbane, Australia ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] CSS Document layout/structure
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: wsg@webstandardsgroup.org
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
RE: [WSG] CSS Document layout/structure
Yes you're right, it it just because I'm always changing my declarations so I let them on the long formulation :) I know that soon I'll have to simplified these declarations. Hugues -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kornel Lesinski Sent: April 7, 2005 07:33 To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS Document layout/structure On Thu, 07 Apr 2005 14:17:01 +0100, Hugues Brunelle [EMAIL PROTECTED] wrote: You can see a sample at http://www.echo3d.com/css/screen.css It looks complex but if you pay attention, Why aren't you using shorthand properties? border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0.1em; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: dotted; border-left-style: none; border-bottom-color: #781B11; equals: border: 0; border-bottom: 0.1em dotted #781B11; and you probably could just leave second rule. -- regards, Kornel Lesiski ** 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 **
Re: [WSG] CSS Document layout/structure
On Thu, 7 Apr 2005 10:41:55 -0500, Hugues Brunelle [EMAIL PROTECTED] wrote: Yes you're right, it it just because I'm always changing my declarations so I let them on the long formulation :) I know that soon I'll have to simplified these declarations. Hugues [...] border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0.1em; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: dotted; border-left-style: none; border-bottom-color: #781B11; equals: border: 0; border-bottom: 0.1em dotted #781B11; Nit-picking comment: border: 0; border-bottom: 0.1em dotted #781B11; Property redefined. The shorthand property border already defines border-bottom. Do you mean? border-bottom: 0.1em dotted #781B11; regards, Kornel Lesiski Best, David -- de gustibus non est disputandum http://www.dlaakso.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 **
Re: [WSG] CSS Document layout/structure
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
Montral 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
**
--
~Dave
Elkan
e: [EMAIL PROTECTED]
w: http://www.zigzig.net
w: http://www.edave.net
inline: eDave.gif
Re: [WSG] CSS Document layout/structure
On Thu, 07 Apr 2005 17:26:50 +0100, Kornel Lesinski [EMAIL PROTECTED] wrote: On Thu, 07 Apr 2005 16:55:52 +0100, David Laakso [EMAIL PROTECTED] wrote: border: 0; border-bottom: 0.1em dotted #781B11; Property redefined. That's correct. The shorthand property border already defines border-bottom. True, but it also defines top, right and left. Do you mean? border-bottom: 0.1em dotted #781B11; No. I ment exactly what I've written. Cascade rules allow this kind of shorthand properties. Granted. Is there any browser software will not render the shortest declaration? http://www.dlaakso.com/border.html Best, David -- de gustibus non est disputandum http://www.dlaakso.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 **
Re: [WSG] CSS Document layout/structure
On Thu, 07 Apr 2005 15:06:32 -0400, David Laakso [EMAIL PROTECTED] wrote: Granted. Is there any browser software will not render the shortest declaration? http://www.dlaakso.com/border.html Best, David Both look the same-Opera 7.54u2 Mac... -- Tom Livingston Senior Multimedia Artist Media Logic mlinc.com Using Opera's revolutionary e-mail client: http://www.opera.com/m2/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Document layout/structure
It's fascinating to see so many CSS styling standards. What makes perfect
sense to one person can be nonsensical to the next. Clearly what makes
styling work for any author is consistency and thoughtful logic -- even if
that logic is idiosyncratic.
Here's what I do:
Any given page can have up to three stylesheet links (more often one or two):
A. global
- normalizes defaults across browsers (margin: 0; padding: 0; etc.)
- styles elements that are common across the site, such as nav menu
B. one css file per class of similar pages. If a site has only one layout
template this gets absorbed into global.css.
C. rarely I'll create one css file per page; more often I identify each
page with a body class or id and style individual pages within its group.
I sequence my rules according to what extent they affect the dimension of
the current element and the position of other elements on the page:
clear float
display position z-index
width height
margin padding
borders
fonts
text-alignment
colors images
The closer to the bottom of the list, the less a rule affects page layout.
On occasion I've tried separating structural dimensional rules from
colors backgrounds to make it easier to change skin while maintaining the
same layout. However, in practice I've found that when I'm called upon to
change colors images I'm most often also changing the layout, and it's
made sense for me to keep all the rules for a given page element in one place.
I alphabetize elements (a, code, h1, p) only when defining generic
standards for the site, but I often and easily overrule alphabetization for
the sake of cascading hierarchy; for example I always begin with *{}, then
body{}, before a{}. I order my own classes ids according to their
occurrence in the xhtml or their precedence in the cascade.
Like Dave Elkan I use lots of white-space:
selector
{
property: value;
property: value;
}
It's airy but it's ALWAYS readable and easily eyeball-searchable. I'm a
firm believer that source code is for humans first; the computer really
doesn't care. A few dozen extra carriage returns aren't going to seriously
bloat my css files, which are cached anyway.
I put a semi-colon after every rule, not omitting the last in a group,
because I don't want to have to worry about it when I add a new rule to the
end of the list.
I one-line rules when there's a similar group and the differences are more
easily perceivable in that format:
body#home logo { background-color: #600; }
body#who logo { background-color: #660; }
body#what logo { background-color: #666; }
body#where logo { background-color: #066; }
I use comments to translate color values:
border: 1px solid #4682B4; /* steelblue */
color: #CCF;/* calm blue */
Doing this in a consistent way makes it easier to globally replace the hex
values and their verbal equivalents in one pass [in the absence of CSS7
global constants or a preprocessor].
Cheers,
Paul
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] CSS Document layout/structure
Im also interested in this As I'm a programmer I had started laying out my
css like code, so that id have:
#nav{}
#nav p{}
#nav ul{}
#nav ul li{}
Which to me made sense and was nice and clear. But the problem was that things
are not related 1 to 1... the #nav ul li{} may need to be styled in multiple
places. Then it all fell to pieces :)
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of C Slack
Sent: Thursday, 7 April 2005 7:34 PM
To: wsg@webstandardsgroup.org
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
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] CSS Document layout/structure
Another thing to consider is whether other people have to read your CSS. If working in groups (or still learning) its best to minimise redundancy. see http://www.mezzoblue.com/archives/2005/01/20/redundancy_v/ cheers, Grant 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? ** This message is intended for the addressee named and may contain privileged information or confidential information or both. If you are not the intended recipient please delete it and notify the sender. ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] CSS Document layout/structure
I'm also from a programming background. Lately I've been working to try
to take advantage of the inheritance in CSS. So, I start with a base.css
(or global.css) and as the CSS grows, I break out portions specific to a
portion of the interface out into seperate files.
For instance, start with global.css. Then I find there are styles
specific to the 'admin' section of a site, I make an admin.css. If form
styles are common, I make a forms.css and then import this back into
global and admin.css. I usually try to not pull portions of CSS out into
a separate file until there are enough rules to make it worthwhile.
I organize like this in an effort to reduce redundancy and make it
easier to find rules. One of my core development values is that I would
rather go one place to fix something. Although I am finding this
challenging with CSS because of the inheritance...but the organization
does help a lot when drilling down on a specific element.
I also figure if I have to go back to it later, I'll find it easier to
reverse engineer.
I usually start with the container element and work inward (ie. div -
down to paragraphs or something) but I like the idea suggested here to
alphabetize so I'm trying it out. It is a lot easier to find a rule when
it's organized this way...thanks for the idea!
diona
On Fri, 2005-04-08 at 08:56 +1000, Earle Castledine wrote:
Im also interested in this As I'm a programmer I had started laying out
my css like code, so that id have:
#nav{}
#nav p{}
#nav ul{}
#nav ul li{}
Which to me made sense and was nice and clear. But the problem was that
things are not related 1 to 1... the #nav ul li{} may need to be styled in
multiple places. Then it all fell to pieces :)
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of C Slack
Sent: Thursday, 7 April 2005 7:34 PM
To: wsg@webstandardsgroup.org
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
**
