CSS For Web Projects - How do YOU Do it?

Peter,

Generally I use several different cascading style sheets, one for the structure of the page, one for forms, one for strictly text and one to handle the so called one off styles.

I really like this layout system for the page structure, http://theholiergrail.com/. It handles menuing etc., and is reasonably cross browser without the hacks.

As for styling forms I use a separate css style sheet for form specific items. You may want to check this site on css and forms, http://www.smashingmagazine.com/2006/11/11/css-bas... It has some very good ideas on how to structure your forms using CSS. Another good one is http://www.456bereastreet.com/archive/200701/styli..., again its got some excellent ideas to use.

One thing about form styling is that I use <label for="id"></label> tags for each of the form elements along with specific styling of the p tag within th eform. This allows me to avoid all grid references or tables when constructing forms. For instance here's what I use for the form and the p tags

form { margin: 0px ; } // so there's no large gap at the top sides or bottom of the form.

.buttonStyle {
   padding:0px 0px 7px 0px;
   background-color:#FFF;
   background-image:url(/images/formButton.jpg);
   width:106px;
   height:31px;
   color:#fff;
   border-width:0px;
   vertical-align:text-bottom;
   font-weight:600;
   font-size:11px;
   font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif, 'Trebuchet MS';
}
.cssform fieldset{
   background-color:transparent;
   width: 440px;
}

.cssform p{
   width: 100%;
   clear: left;
   margin: 0;
   padding: 3px 0 0 0;
   padding-left: 135px; /*width of left column containing the label elements*/
   font: normal bold 1em/1.3em Arial, Verdana, Helvetica, Geneva, "Trebuchet MS", Tahoma, sans-serif;
   /*border-top: 1px dashed gray;
   border-bottom: 1px dashed gray;
   border-right:1px dashed gray;*/
   height: 1%;
}

Then the label:
.cssform label{
   font-weight:normal;
   font-size:1em;
   background-color:transparent;
   color: #454545;
   font-weight:bold;
   float: left;
   margin-left: -130px; /*width of left column*/
   width: 130px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

and the text input:

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
   width: 250px;
}

then the form would look something like this:

<form name="rmiForm" method="post" action="foo.cfm" class="cssform" AUTOCOMPLETE = "off" enctype="multipart/form-data">

<fieldset><legend>&nbsp;<strong>Your Information</strong>&nbsp;</legend>
<p>
   <label for="name">Name</strong></label>
   <input type="text" name="name" id="name" tabindex="1" value="" />
</p>
<p><input type="submit" value="Save" class="buttonStyle" />
</form>
</fieldset>

Anyhow this produces a fairly nice looking form using semantically correct markup without hacks etc.

regards,
larry

For the forms part of the equasion,
http://www.quackfuzed.com/index.cfm/2008/6/2/UniFo...

It is a set of feature rich custom tags that help create accessible, attractive, skinnable, consistant forms in a truly rapid fashion.

Take a few seconds and peruse the demo page here:

http://www.quackfuzed.com/stuff/jquery/uni-form-cu...

I try not to build an app without them.

DW

just resubscribing to the thread

Hi,
You may not know me but I got bored and started doing Googleblog searches for 'CSS' when your blog came up. I'm a web designer at USNews.com and we recently consolidated all of our CSS.

At first we had CSS files for different types of content named like articles.css, blogs.css, homepage.css etc. The problem with this is I noticed we were using a lot of duplicate CSS code in different files which made it tricky to manage.

Our new method consists of creating small modules that go to different packages when published live. For example we have different structure modules like twocolumn.css and threecolumn.css that control the width and float of different columns. We also have other modules like widgets that control the styles for every right-rail widget on the site. To control which modules go with which CSS files we use an XML file that basically follows this style:

<CSS file>
<module>
<module>

so using our example from above where an article is a two column page and section pages are a three column page would look like this:

article.css
twocolumn.css
widgets.css

section.css
threecolumn.css
widgets.css

It might help to look at the real deal. Here is the final combined homepage CSS file -> http://static.usnews.com/css/homepage.css if you look at the comments you can see which modules make up each CSS file using a path like http://static.usnews.com/modules/twocolumn.css

At any rate we have a python script on the backed that reads the configuration XML file, takes the contents of all the modules in a package and combines them into the final CSS file.

Now we can have several CSS code chunks used in different CSS files but only needing to go to one place to update them. Consistency goes a long, long way when dealing with a huge site like usnews.com.

Hope this has been helpful and if you have any questions, feel free to e-mail me.

@ Dan

Care to share your ant script? I'd be interested in seeing how you do the minification (is that a word?) and combine the different files together

For what it's worth, I wrote about how I employ CSS a while back at http://robwilkerson.org/2008/03/21/css-organizatio... I'm reevaluating this just a little bit (including a move away from using a reset style sheet), but it still works for me at its core.