How can I clean this CSS code; making it shorter or delete unnecessary parts (CSS perfectionist needed)

Question

How can I clean this CSS code: making it shorter, nesting properties together, deleting unnecessary code, etc.

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
:focus { outline: 0; } /* remember to define focus styles! */
ins { text-decoration: none; } /* remember to highlight inserts somehow! */
del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* tags */
body {
    background: #F9F9F9;
    color: #888;
    font-family: Arial, "微软雅黑", "MS Trebuchet", sans-serif;
    font-size: 75%
}
h1 {
    font-size: 32px;
}
h2 {
    /*color: #999;*/
    color: #999;
    font-size: 14px;
    margin: 0 0 20px 0;
}
p {
    line-height: 160%;
}
a {
    color: #69C;
    list-style: none;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/* structure */
.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    width: 960px;
}
/* header */
#header {
    background: #EEE;
}
#header h1 {
    float: left;
}
#header h1 a {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    float: left;
    height: 30px;
    text-indent: -9999px;
    width: 500px;
}
/* banner */
#header-top {
    border-bottom: 1px solid #DDD;
    padding: 0 0 15px 0;
    margin: 30px 0;
    overflow: hidden;
    width: 960px; /* ie6 hack */
}
#lang {
    float: right;
    padding: 20px 0 0 0;
}
#lang li {
    float: left;
}
#lang li a {
    font-size: 10px;
    float: left;
    margin: 0 0 0 20px;
}
#lang li a.current {
    color: #888;
}
/* intro */
#header-bottom {
    overflow: hidden;
    padding: 0 0 30px 0;
}
#tagline {
    float: left;
    margin: 0 40px 0 0;
    width: 540px; /* 560 */
}
#tagline h2 {
    font-size: 24px;
}
#tagline h2 strong {
    /*color: #69C;*/
}
#about {
    float: right;
    width: 380px;
}
/* work */
#content {
    background-color: #F9F9F9;
}
.showcase {
    border-bottom: 1px solid #DDD;
    margin: 30px 0 0;
    overflow: hidden;
    padding: 0 0 30px;
    width: 960px; /* ie hack */
}
.showcase div.right {
    display: inline; /* ie hack */
    float: left;
}
.showcase div.left {
    display: inline; /* ie hack */
    float: left;
    height: 211px;
    margin: 0 20px 0 0;
    position: relative;
    width: 290px;
}
.showcase div img {
    border: 2px solid #EEE;
    width: 630px;
    height: 190px;
    padding: 8px;
}
.showcase div img:hover {
    border: 2px solid #CDE;
}
.showcase div p {
    margin: 0 0 20px 0;
}
.showcase div ul#sites {
    position: absolute;
    bottom: 0;
    overflow: hidden;
    line-height: 160%;
}
.showcase div ul#sites li {
    float: left;
}
.showcase div ul#sites li a {
    border: 1px solid #9CF;
    color: #69C;
    float: left;
    padding: 0 5px;
    margin: 0 20px 0 0;
    text-decoration: none;
}
.showcase div ul#sites li a:hover {
    border: 1px solid #69C;
}
.showcase div ul#details {
    line-height: 160%;
}
/* footer */
#footer {
    background-color: #333;
    color: #BBB;
    clear: both;
}
#footer h2 {
    color: #EEE;
}
#footer p {
    color: #BBB;
}
/* contact */
#footer-top {
    border-bottom: 1px solid #444;
    line-height: 160%;
    overflow: hidden;
    padding: 30px 0;
    width: 960px; /* ie6 hack */
}
#footer-top div {
    overflow: hidden;
}
#contact {
    float: left;
    margin: 0 40px 0 0;
    overflow: hidden;
}
#contact form {
    margin: 20px 0 0;
}

#sendmail label {
    width: 250px;
    margin: 0 0 10px 0;
}
#sendmail label.error{
    color: #FF4444;
    margin: 0 0 20px 0;
}
#sendmail label {
    display: block;
    vertical-align: top;
    cursor: hand;
}
#name, #email, #message {
    border: 0;
    background-color: #444;
    font-family: Arial, "MS Trebuchet", sans-serif;
    color: #BBB;
    font-size: 12px;
    padding: 6px;
    margin: 0 0 10px;
    width: 380px;
}
#name:focus, #email:focus, #message:focus {
    background-color: #555;
}
#message {
    height: 200px;
    overflow: auto;
}
#button {
    background-color: #69C;
    border-color: #69C;
    border-style: solid;
    border-width: 1px;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-family: Arial, "MS Trebuchet", sans-serif;
    margin-top: 10px;
    padding: 2px;
    width: 100px
}
#button:hover {
    background-color: #49C;
    border-color: #49C;
}
/*\*//*/ form.contact legend { display: inline-block; } /* IE Mac legend fix */
#info {
    float: right;
    width: 303px;
    margin: 0 0 0 40px;
}
#tools {
    float: right;
    margin: 0 0 0 40px;
    width: 83px;
}
/* about */
#footer-bottom {
    font-size: 10px;
    margin: 15px auto;
}

EDIT: ...or do you know any css optimizer which nest css selector and properties together?

Answer 1

On https://purifycss.online/ you just need:

to enter the URL of the website,

hit "Clean up CSS" button, and:

you'll be able to download to purified CSS.

It worked for me like a charm.

Answer 2

On #button

border-color: #69C; 
border-style: solid;
border-width: 1px;

can be written more concisely as

border:1px solid #69c;

Answer 3

Cleancss.com seems to do the trick. You can choose between a bunch of different options. Check it out and see if it's something that could work for you!

Answer 4

You've got 5kb of cacheable, gzippable CSS there, which would be even less if you stripped comments and whitespace. Trying to optimise any further than that I don't think is worth more than about 3 seconds of your time, really.

Answer 5

You can delete /*\*//*/ form.contact legend { display: inline-block; } /* IE Mac legend fix */ — even Microsoft doesn’t support Mac IE any more.

Answer 6

if you have margin: 0 0 20px 0; - you can remove the last 0 as this is the left margin which is the same as the right.

There are a few online tools that can optimize css if you google for them(e.g. http://flumpcakes.co.uk/css/optimiser/). There is a fine line between optimisation and maintainability though. If you remove all the comments etc that will make the file smaller but less maintainable. Again you can remove all the line breaks to make a smaller file but not sure that is better.

I would probably not use a reset.

To me you CSS seems pretty compact already.

Answer 7

First of all remove all css hacks and place them in other, browser specific, files, which you'll be including via conditional comments.