Quick CSS Tips for Fast Development
Jul18

Tags

Related Posts

Share This

Quick CSS Tips for Fast Development

Posted by Crystal on Jul 18, 2010 in Tips and Tricks | 3 comments

CSS can be a fun thing, or it can be a daunting thing. It really all depends on how you go about it. Do you end up slowly coding your design, only ending up spending your time fixing error after error? Is getting your design to work nicely in all the top browsers constantly a problem?

If so, you may be going about CSS the wrong way. In this post we’ll discuss a few of my favorite tips and best practices for beginning a new design to code project in XHTML and CSS.

1. Set Up a Quick Template

I usually don’t work with a framework, even with WordPress or custom applications, unless it’s a bigger project. I find that doing this only creates unwanted confusion and more setbacks than what the time/energy you save is worth. Instead, I realize what elements I use repeatedly, and recognize that I’m already using a template. In other words, I’m already using my own version of a basic framework: just to my standards.

For better productivity, determine what you use regularly and save it as a template. Below is the standard CSS template I use. I generally stick with this template, and alter it only slightly as needed for each project:

/* I start with the 'html, body' and ensure the background, general
font style, and color. I find that for the font style and color, I use
these settings the most, so I place them in my template. */

html,body{
          background: #fff url('../images/background.jpg');
          font: normal 11px/18px Arial, Helvetica, sans-serif;
          color: #666;
}*{margin: 0; padding: 0;}

/* (above) Resets all browser's margin & padding to 0. */

/* (below) Creates a wrapper/container div, centered,
at the standard 960px. */
#wrapper{
          width: 960px;
          margin: 0 auto;
}

/* General div containers I almost always use. */

#header{

}

#content{
          float: right;
}

#sidebar{
          float: left;
}

#footer{
          clear: both;
}

h1,h2,h3,h4,h5,h6{}
h1,{

}
h2{

}
h3{

}

/* All the general typography. I do most of this manually, per project.
I do however include all the general tags in my CSS so I don't forget
anything. */

p{}
blockquote{}
pre,code{}
ul{}ul li{}
ol{}ol li{}

img{

}

a{}
a:hover{}

After this, I can fill in the blank for a very quick development process. Of course, I also carry around an XHTML 1.0 Strict template that matches the CSS template above:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title Here</title>
<style href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
</head>

<body>

<div id="wrapper">
          <div id="header">

          </div>

          <div id="sidebar">

          </div>

          <div id="content">

          </div>

          <div id="footer">

          </div>
</div>

</body>
</html>

The XHTML version covers everything that was in our CSS template, and then links to it. It also includes 100% validated code to start off with, and a link to the jQuery library. I personally don’t include meta tags, because they can differ so much from when I’m making WordPress themes to static web pages, and per client.

2. Use a Good Editor

Use something that starts up fast, is color-coded and tabs correctly. Use an editor that is specifically made for CSS or webpage coding otherwise. I myself use Notepad++, but Mac users often use Textmate.

For many Dreamweaver is sufficient, and definitely holds the features to get the job done. However, a negative point of always using Dreamweaver is that it takes long to load up and is pretty bulky. In general, something like Dreamweaver is sufficient for a development project, but only for bigger ones. In many instances, a lighter version where the interface is cleaner and the program is faster is a better option.

3. Memorize & Keep a Cheat Sheet

Anyone can find CSS cheat sheets around the web, but like the templates, I suggest creating your own. This is, unless, you find a great cheat sheet that meets all of your needs.

I like to keep my cheat sheets right in my text editor for quick copying and pasting. Many other developers also keep a printed version above or around their desk, which can also be beneficial. Whatever works best for you is the best choice, but with all the code I write repeatedly, copying and pasting is the best option for me. Of course, you can keep both on hand for quick access.

In the cheat-sheet, include all things you use regularly that you do not have memorized. Keep CSS3 and CSS that is prior to CSS3 separately, so you can keep note of what may not degrade properly in older browsers. Keep notes on what to use regularly and what CSS techniques cause problems right on the cheat sheet. By avoiding techniques you may have learned or have been using that tend to cause problems, you can speed up development time dramatically.

About the Author

Kayla Knight is a freelancer with 10 years experience in the field. She loves to design, code, and blog, and she specializes that work around user-friendly, functional, and beautifully minimalistic website creation. She works over at the XHTML Shop, and also freelances under her own name over at KaylaKnight.com.

Feel free to follow her on Twitter, subscribe to her blog, or hire her for freelance work.