As linked in Smashing Magazine’s article “70 Expert Ideas for Better CSS Coding“, various developers have posted source code for their baseline stylesheet at one point or the other: Christian Montoya, Eric Meyer, Ping, Mike Rundle…any others come to mind?
For posterity I’ll go ahead and post mine here as it will no doubt evolve into a different animal a year from now. In fact I’ll try to post it again in May 2008 to see what’s changed in the approach:
/*
TABLE OF CONTENTS
HTML Elements
Page Structure
Navigation
Headings
Content Area
Forms
Clear
Footer
/* ---------- @ HTML Elements -----------*/
* {
margin: 0;
padding: 0;
}
body, html {
color:#666;
background: #FFF url(/images/bg.jpg);
min-height:101%;
font-size: 100%;
}
body, form {
font-family: Arial,Verdana
}
p {
margin: 15px 0;
}
a:link, a:visited {
text-decoration:none;
color: #369;
}
a:hover, a:active {
color:#2e81d4;
text-decoration:overline
}
*:focus {
outline: none
}
/* ---------- @ Page Structure -----------*/
#wrapper {
background: url(/images/bg_wrapper.png);
margin: 0 auto;
font-size: 0.8em;
width: 860px;
}
#masthead {
background: url(/images/bg_masthead.png);
height: 146px;
}
.left {
float:left;
}
.right {
float:right
}
/* ---------- @ Navigation -----------*/
#nav li {
list-style:none;
}
#nav a {
display:block;
width: 122px;
height: 16px;
text-indent: -9000px;
}
a#foo {
background:url(/images/nav_foo.gif);
}
a#foo:hover {
background:url(/images/nav_foo_on.gif);
}
/* ---------- @ Headings -----------*/
h1, #logo {
width: 150px;
background: url(/images/logo.png);
height: 146px;
text-indent:-9000px;
font-size: 1.8em
}
h2 {
font-size: 1.6em
}
h3 {
font-size: 1.4em
}
h4 {
font-size: 1.2em
}
/* ---------- @ Content Area -----------*/
/*Home*/
#content {
}
#sidebar {
}
/*Interior Pages*/
.bullets {
padding:15px 15px 15px 30px;
}
.bullets li {
background:url(/images/bullet.gif) no-repeat;
list-style:none;
padding-left: 11px;
margin-bottom: 5px;
}
/* ---------- @ Forms -----------*/
.button {
background: #000 ! important;
border:#F7ECD4 1px solid;
padding: 2px;
margin: 0 2px 0 0;
color:#FFF;
}
.button:focus {
padding:2px;
background: #000 ! important;
}
.button:hover {
background: #CCC ! important;
color: #000;
}
/*Clear*/
.clearfloat:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfloat {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfloat {
height:1%;
}
*+html .clearfloat {
height:1%;
}
.clearfloat {
display:block;
}
/* End hide from IE-mac */
/* ---------- @ Footer -----------*/
#footer {
padding: 20px;
color:#7f99b3;
}
Download the whole thing here.
Notes:
- A Table of Contents always becomes more useful as the stylesheet grows.
- “Hooks” are added to each section in the form of an @ symbol. This is so code editors can CTRL+F (Search) for the @ symbol in order to more easily skip through sections of the stylesheet.
- Global styles are reset with an asterisk (*) to adjust for padding and margin properties which some browsers do not agree on.
- Font-size in the <body> is initially set to 100% for the same reason.
- A min-height property is added to the <body> to adjust for Firefox’s jarring habit of adding/removing a scrollbar depending a page’s height.
- Font styles are specified in both <body> and <form> tags since text fields in some browsers ignore font styles.
- Margins are specified for the <p> tag to adjust for browser inconsistency.
- The global psuedo-class :focus is set to “outline:none” because the dots it creates are obtrusive in some browsers.
- Relative to the initial 100% size, font-size is re-established for the entire wrapper in <em>s to allow users to scale text up and down.
- Classes .left and .right are created to enable basic floats, and are meant to be combined with other classes (ex: “<div class=”left sidebar”>foo</div><div class=”right content”>foo</div>
- Generic navigation elements are created within an unordered list called #nav with the assumption that list items will use image-backgrounds. The text-indent property is “-9000px” so text does not float over the images.
- The h1 tag shares the same properties as the #logo ID because the logo on the interior pages will also serve as a link back to Home.
- A class of .bullets is created for traditional bulleted lists. Padding and margins are set to display universally among browsers.
- A class of .button is created for use in forms. The use of “!important” is to maintain browser consistency when the button is pressed.
- Float clearing specs are courtesy of PiE.
Popularity: 2% [?]
Posted in 
Thanks for this great and clean style sheet. I was working on a project this weekend and was able to use this to get me past some layout issues that I couldn’t figure out. It should launch later this week - I will send you the url when it is live.
--July 9, 2007 @ 11:57 amNice. Very clean. I’m stealing this.
--January 25, 2008 @ 6:32 pm