7
\$\begingroup\$

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!

\$\endgroup\$
11
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ IDs** So, instead of #a, #b, etc. use .a, .b Misc** Hr - for some reason, that didn't work for me. I guess I did it wrong and ended up messing with the background. Negative margins - the only way I could get things to align properly. It is bad, I know. But like I said, I couldn't do any better. \$\endgroup\$ – user1357639 Jun 25 '12 at 15:09
  • \$\begingroup\$ Yes, classes instead of ids means to use e.g. .odd { background-color:#FFF; }. (In this case I would probably use td.odd { background-color:#FFF; }) \$\endgroup\$ – ANeves wants peace for Monica Jun 25 '12 at 16:16
  • \$\begingroup\$ Thanks for the advice! As per the negative margins, I'm not really sure how to fix them considering how my elements just jump around. \$\endgroup\$ – user1357639 Jun 25 '12 at 21:59
  • \$\begingroup\$ If you want help with that, you would have to share the HTML as well. A working JSFiddle would be ideal. But I would open a new question, rather than editing this one. \$\endgroup\$ – ANeves wants peace for Monica Jun 26 '12 at 9:27
  • \$\begingroup\$ even and odd should absolutely be classes. I also agree that they should be attached to just the td. I also really like the statement about relative sizes, that is a great idea. Thanks \$\endgroup\$ – kwelch Jun 29 '12 at 13:38
4
\$\begingroup\$

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

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.