It’s so easy to write CSS without laying out a single comment. After all, in those glorious moments of coding, everything is understood. You know what your coding because, well frankly, you’ve been coding it! Don’t get me wrong, I’m a true believer in balancing time constraints and code quality. I’m also a true believer in finding the perfect balance between code simplicity and code expandability. But quite frankly, I’ve mopped up too many messy stylesheets recently that I felt obligated to encourage good practices.

So time goes by and lucky for you, your all done with that site so your markup doesn’t really matter. After all, it works, and if it ain’t broke, don’t fix it. But then comes the day where you get that phone call, and you’ll need to make changes to that spreadsheet you coded so mindlessly way back when. Oops! I guess it doesn’t make as much sense as it did when you were coding it. “What was I thinking!?” -or maybe its more along the lines of “What in the world was this guy thinking!?” 

Thank goodness for Firefox Add-ons like Firebug! Oh where would I be without it. But regardless, I am finding more and more that CSS markup conventions are just lacking, and designers are the ones responsible!

Here’s some practices that may save you (or anyone else for that matter) a fair amount of time when editing those stylesheets.

Though I don’t like resetting styles when I don’t have to, I tend to like defaulting specific elements to have no padding, margin, and border. Until all browsers conform to the exact same “default browser spreadsheet”, resetting styles is beneficial in the sense that it overrides specific properties to be the same across all browsers.

/*********************
  RESET STYLES
*********************/
img, table, tr, td, tbody, ul, li, ol {
	padding: 0;
	margin: 0;
	border: 0;
}

I always like to keep “tag specified” styles in its own section at the top of my file (they can always be overwritten by compound CSS):

/*********************
  TAG SPECIFIC STYLES
*********************/
body {
	background: url('../graphics/design/body-bg.jpg');
	font: .9em normal Arial, Verdana, Tahoma;
	color: #666666;
}
a {
	color: #666666;
}
a:hover {
	color: #000000;
}
a:active {
	color: #666666;
}
fieldset {
	border-color:#999999;
	border-style:solid none none;
	border-width:1px;
	padding:0.75em;
}

It’s also nice to have “general classes” for those rogue elements that you don’t know what to do with:

/*********************
  CLASS SPECIFIC STYLES
*********************/

.noborder {	border: 0; }
.nomargin { margin: 0; }
.nopadding { padding: 0; }

.floatleft { float: left; }
.floatright { float: right; }
.block { display: block; }
.inlineblock { display: inline-block; }
.inline { display: inline; }

… and finally some general advise for your CSS properties:

/*
##	COLOR MAPPING - to help with managing frequently used colors
##
##		Mango Orange: CE882D
##		Dark Red: 621817
*/

/*  Comments next to specific properties along with author notes
      help you remember why the "value" is coded a particular way */
	#newsletter h3 {
		color: #ce882d; /* Orange */
		margin: 10px 0;
	}
#footer {
	width: 100%;
	height: 13px; /* absolute height is specified for all footer items for IE6 compatibility - jbarnett@mc2design.com */
	display: block;
	vertical-align: top;
}

A technique that I sometimes use (when colors are not specified) is obtaining a color code of a certain element using the Firefox Add-On ColorZilla, and simply performing a CTRL+F[ind] (or CMD+F in OSX) and searching for the color code in the stylesheet. However, its actually more useful to use the “Inspect” tool in Firebug and to obtain the exact line you need to modify.

Some might be thinking, “Well with all that time trying to comment-up my stylesheets, I could of just spent it figuring it out sometime in the future”. Wrong! The time you spend making your spreadsheet understandable is nothing compared to the time you’ll waste trying to figure your spreadsheet out later on. I find that the best way to comment your stylesheets, is to comment as you code. Not after your done writing it. But while you write it!

This entry was posted on Friday, March 27th, 2009 at 3:43 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.