I don't have a web page for you but what we do is follow the flow of the
page, so things that go in the header come first, then usually nav, then
content, then footer and so on.
I work with two other developers, so to keep things consistent we
alphabetize our declarations. For instance, here's on that is rather long:
div#nav ul li {
background: #333;
background: -moz-radial-gradient(center 0deg, #444, #333);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(#444),
to(#333));
border-bottom: 1px solid #000;
border-left: 1px solid #454545;
border-right: 1px solid #212121;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-radius: 8px 8px 0 0;
border-top: 1px solid #333;
float: left;
font-weight: bold;
height: 56px;
margin: 3px 0 0 0;
padding:3px 0 0 0;
position: relative;
text-align: center;
}
The declarations are all in alphabetical order except the proprietary ones.
With those we put the soon-to-be-adopted version at the bottom of the list,
so that when there is full browser support, the standard versions will
override the proprietary ones. I.e.:
-moz-border-radius: 8px 8px 0 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-radius: 8px 8px 0 0;
Older mozilla and webkit browsers will read the -moz & -webkit declarations
respectively, while later versions will simply use border-radius declaration
in this example.
Finally, we've found it helpful to create a table of contents at the top of
the CSS file to make it easier for other developers to find what they're
looking for. Here's an example:
/*--------------------------------------------------
[Main Site Template Stylesheet]
[Table of contents]
1.0 Headers
1.1 Heading Sizes & Semantic Classes
1.1.1 Heading Ampersand Pairs
1.2 SUA Header
1.3 Header Contact Link
1.4 SUA Main Navigation
1.4.1 Nav Items Default States
1.4.2 Nav Hover, Current & Active States
1.4.3 Current Tab Hover States
1.5 Page Header
2.0 Breadcrumbs
Author(s): Tony Thomas
Version: 1.0.0
Last change: 11/23/2010
------------------------------------------
Notice the indentation of the subsections. The css itself follows that same
pattern and the sections are labeled using comments to make the style sheet
more readable.
I hope this helps.
On Mon, Mar 28, 2011 at 11:50 AM, Robert <[email protected]> wrote:
> Is there a good web page out there about organizing CSS?
>
> --
> Robert
>
> --
> --
> You received this because you are subscribed to the "Design the Web with
> CSS" at Google groups.
> To post: [email protected]
> To unsubscribe: [email protected]
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
