Baseline Stylesheets

Posted May 12, 2007 • 32 Comments

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:

  1. A Table of Contents always becomes more useful as the stylesheet grows.
  2. “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.
  3. Global styles are reset with an asterisk (*) to adjust for padding and margin properties which some browsers do not agree on.
  4. Font-size in the <body> is initially set to 100% for the same reason.
  5. 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.
  6. Font styles are specified in both <body> and <form> tags since text fields in some browsers ignore font styles.
  7. Margins are specified for the <p> tag to adjust for browser inconsistency.
  8. The global psuedo-class :focus is set to “outline:none” because the dots it creates are obtrusive in some browsers.
  9. 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.
  10. 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>
  11. 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.
  12. 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.
  13. A class of .bullets is created for traditional bulleted lists. Padding and margins are set to display universally among browsers.
  14. A class of .button is created for use in forms. The use of “!important” is to maintain browser consistency when the button is pressed.
  15. Float clearing specs are courtesy of PiE.