Admin CSS sidebar template

Question

Could I get some feedback on my simple start to an admin template: http://jsfiddle.net/spadez/GHKxW/3/

HTML

  <div class="wrapper">
    <div class="left">
      <a href="#"><img src="nav_sprite.jpg" class="logo" /></a>

      <ul class="navigation">
        <li id="dashboard"><a href="index.html" class="active">Dashboard</a></li>


      </ul>
    </div>

    <div class="right">
      <h1>Title</h1>
    <p>Content</p>
    </div>
  </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

li {
    list-style: none;
}
a {
    text-decoration: none
}

html, body {height: 100%; max-height: 100%; padding:0; margin:0;}
.wrapper {display:table; width:100%; height:100%;}
.wrapper > div {display:table-cell; vertical-align: top;}
.wrapper .left {width:200px; background-color:#34495E}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}

.navigation {
}
.navigation li {
}
.navigation li span {
    display: inline-block;
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
    width: 16px;
    height: 16px;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
}
.navigation li a {
    display: block;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.navigation li a:hover {
    background-color: #495C6D;
}
.navigation li a.active {
    background-color: #495C6D
}
#rss span {
    background-position: -52px -68px;
}
#photos span {
    background-position: -90px -66px;
}
#links span {
    background-position: -45px 0;
}


h1 {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 30px; font-weight: 500;}

.logo {height: 50px; margin-bottom: 30px;}


.btn {
    letter-spacing: 1px;
    font-weight:bold;
    padding-left: 10px;
    padding-right: 10px;
    height: 34px;
    border-radius:3px;
    border: 0px;
    text-transform:uppercase;
    font-size:12px;
}

#btn_pri {
    background-color: #60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}

Answer 1

This looks pretty good for a start.

the only thing that I see right away is your CSS formatting

a {
    text-decoration: none
}

html, body {height: 100%; max-height: 100%; padding:0; margin:0;}
.wrapper {display:table; width:100%; height:100%;}
.wrapper > div {display:table-cell; vertical-align: top;}
.wrapper .left {width:200px; background-color:#34495E}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}

Here you switch between what I would call Minified CSS and Egyptian Brackets and the last rule here is a mix.

you should always stay consistent with your Formatting, especially in CSS because it can get confusing when you start adding more rules

so if you did this in all Egyptian Formatting.

a {
    text-decoration: none
}

html, body {
    height: 100%; 
    max-height: 100%; 
    padding:0; 
    margin:0;
}

.wrapper {
    display:table; 
    width:100%; 
    height:100%;
}

.wrapper > div {
    display:table-cell; 
    vertical-align: top;
}

.wrapper .left {
    width:200px; 
    background-color:#34495E
}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}

#btn_sec { 
    background-color: #e74c3c;
    color:white;
}

This is how I would do it personally, it is clear what rule is what, and it looks neat and tidy as well.

but how ever you decide to do it, please be consistent.

---

As far as these Empty Rules.

.navigation {
}
.navigation li {
}

I assume that you are going to use them in the future for something, if not, get rid of them, they will clutter up your code.

Answer 2

While I agree with Malachi about the formatting for your CSS, my one caveat in development is rules that I consider "done" that are still expanded out take up lots of room. In a large CSS sheet this is maddening.

As I am working on the site, and I alone am the only developer then I will condense rules that I consider "done". If it is hard to understand what they are then I put in a simple comment temporarily. I feel that for myself this is more readable, especially in a css sheet that contains a few thousand lines.

To that end, I would suggest developing a comprehensive comment system that is easy for you to navigate, especially if you expect your css sheet to become large. Create an index and headings with comments that you can easily find through a scroll or with control-f. For example...

/* ----------------------- */
/* 1.0 Header Styles       */
/* 2.0 Navigation Styles   */
/* 3.0 Content Styles      */
/* 3.1 -- Specific Content */
/* ----------------------- */

/* 1.0 Header Styles
************************************/

The above of course is just my preference. It helps to keep me organized.

All in all, my point, is develop however YOU feel is quickest for yourself, assumign you are the only one working on the project. When you are done with development, your CSS should be minified and comments removed, so what it looks like in development doesn't really matter if you're the only one working on it.