CSS shortcut:How I save 30 minutes of work on every project


As a webdesigner, I need to be productive. And most of the time I’m quite busy, I don’t sit and wait for new assignments to come in and my todo hasn’t been under 40 items in the last year. When I started doing webdesign, I would start over with fresh HTML and CSS files for every design I made. But you learn quite fast that starting with your basic styles in place will easily cut your coding time down.

I’m sure some of you already do like I did, by either starting out with a fresh stylesheet or by using bits and pieces from old designs. But really organizing and optimizing your basic files, is a great idea. It has cut me coding time down by about 30 minutes per site. That might not seem like a lot, but that’s 30 minutes I can use on other projects.

I use a grid system as my guideline. Then it’s easy to expand from there. Here it is.

/* Reset */

li,ol,ul,fieldset,form,label,table,tbody,tfoot,thead,tr,th,td {
margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1.5; font-family: inherit; text-align: left; }
table { border-collapse: collapse; border-spacing: 0;}
ol,ul {list-style: none;}

/* Grid */
body { background-color:#fff; color: #000; }

.container {margin:0 auto; width:960px; display:block;}
.d160, .d320, .d360, .d480, .d640, .d800, .d960, .d80, .d240,
.d400, .d560, .d720, .d880, .d960 {float:left; display: inline; margin-left:20px;}
.d80 {width:60px;}

/* Basics */
a {}
a:visited {}
a:active {}
a:hover {}
.right { text-align:right;}
.clear {clear:both;}
.noborder {border:none;}
h1 { }
h2 { }
h3 { }
h4 { }

So get in there and organize your basic stylesheet, and watch as the minutes fly off your production time.
Leave a comment if you have any good advise on how to optimize production time even more 🙂