CSS Optimization? How can I clean my code

Question

My CSS feels dirty and I have no idea how to improve it.

Suggestions are greatly appreciated!

html, body { border:0; margin:0; padding:0; }
body { font: normal 12px helvetica,sans-serif; }
.header { 
    background-color:#242424;
    height:40px; }
.header h1, h2 { text-transform:uppercase; }
.header h1 {
    color:#FFF;
    display:inline;
    font-size:12px; }
.header h2 {
    color:#B4B4B4;
    display:inline;
    font-size:12px; }
.header #title, .sub #nav, #content {
    margin:0 auto;
    width:797px; }
.header #title {
    padding-top:12px; }
.header #version {
    color:#FFF;
    float:right;
    font-size:10px;
    margin:-13px 10px 0 0; }
.sub {
    background-color:#E4F2FD;
    border-bottom:#D1E5EE solid 1px;
    height:30px; }
.sub ul, li { margin:0; padding:0; list-style:none; }
.sub li {
    float:left;
    padding-left:10px;
    margin:8px 20px 0 -18px; }
.sub li a {
    color:#21759B;
    padding:8px;
    text-decoration:none; }
.sub li a:hover { background-color:#FFF; }
#content { margin-top:15px; }
h1 { font-size:13px; }
hr {
    border:0;
    height:1px;
    background-color:#E9E9E9; }
.quick-add {
    background-color:#E9E9E9; 
    color:#575757;
    font-size:12px;
    margin-top:10px;
    padding:2px; }
.quick-add td { padding-left:8px; }
#data { margin-top:15px; }
#member { width:100.5%; margin-left:-1px;}
#even {
    background-color:#EFF8FF; 
    color:#21759B; }
#odd {
    background-color:#FFF; }
#data td { padding:3px; }
#a { width:5%; text-align:center;}
#b { width:40%; }
#c { width:10%; }
#d { width:20%; }
#e { width:15%; }

Also, I have two different tables on two different pages (one for members and another for information) what's the best way to independently style them?

Thanks!

Answer 1

Use classes instead of ids

• #even
• #odd
• #a, #b, #c, #d, #e

These are clearly repeating patterns that might happen several times in the same page.
An id is supposed to be unique on the page.

Use better names

The id or class of an HTML element, like a class or function name when programming, is supposed to describe it.
#a, #b, etc, are bad names. If your HTML and CSS are small, it's not complicated to figure out what they do. But if they grow, or if someone else picks up your code, it might start to get tricky to figure out what each class/id is about.

Clear nomenclature is better.

Use relative sizes

Your body defines font-size as 12px. Your h3, 13px.
If you change the body's font-size, you will have to hunt down all other definitions and update them - e.g. the h3.

If you define the first font-size absolutely (body: 12px) and then define all others relatively (h3: 110%), when you update the body's font-size the others adjust automatically.
This has the added advantage of being friendlier to people using user styles, e.g. people that use larger font-sizes to be able to read better.

Misc

• On the hr, why not style the border instead of clearing the border and using background-colour?

• I see too many negative margins. It feels somehow wrong.

"Two different tables"

I would first style them exactly the same, and then if necessary just add extra styles to differentiate them - perhaps change the colour of the borders or the background of the headers.
I'm not sure what you are asking there.

Answer 2

You can try tools like CSSTidy to clean your CSS. Here is an online tool who use CSSTidy with the result of the cleaning with default setup: http://www.cleancss.com/

html,body {
  border:0;
  margin:0;
  padding:0;
}

body {
  font:normal 12px helvetica,sans-serif;
}

.header {
  background-color:#242424;
  height:40px;
}

.header h1,h2 {
  text-transform:uppercase;
}

.header h1 {
  color:#FFF;
  display:inline;
  font-size:12px;
}

.header h2 {
  color:#B4B4B4;
  display:inline;
  font-size:12px;
}

.header #title,.sub #nav,#content {
  margin:0 auto;
  width:797px;
}

.header #title {
  padding-top:12px;
}

.header #version {
  color:#FFF;
  float:right;
  font-size:10px;
  margin:-13px 10px 0 0;
}

.sub {
  background-color:#E4F2FD;
  border-bottom:#D1E5EE solid 1px;
  height:30px;
}

.sub ul,li {
  list-style:none;
  margin:0;
  padding:0;
}

.sub li {
  float:left;
  margin:8px 20px 0 -18px;
  padding-left:10px;
}

.sub li a {
  color:#21759B;
  padding:8px;
  text-decoration:none;
}

h1 {
  font-size:13px;
}

hr {
  background-color:#E9E9E9;
  border:0;
  height:1px;
}

.quick-add {
  background-color:#E9E9E9;
  color:#575757;
  font-size:12px;
  margin-top:10px;
  padding:2px;
}

.quick-add td {
  padding-left:8px;
}

#member {
  margin-left:-1px;
  width:100.5%;
}

#even {
  background-color:#EFF8FF;
  color:#21759B;
}

#data td {
  padding:3px;
}

#a {
  text-align:center;
  width:5%;
}

#b {
  width:40%;
}

#c {
  width:10%;
}

#d {
  width:20%;
}

#e {
  width:15%;
}

.sub li a:hover,#odd {
  background-color:#FFF;
}

#content,#data {
  margin-top:15px;
}

You can tweak a lot of option to optimize your CSS to your liking