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.
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
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
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
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
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
!
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
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
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
] 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
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
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
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 -
-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
: 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
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;
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;
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
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
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
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
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
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
23 matches
Mail list logo
