Refactor early, refactor often

Remove obsolete definitions immediately

Avoid redundancies, e.g. defining the same thing in .classname and .classname:hover

Use comments /** Head **/ to build a clear structure.

Use Code Beautifier or CSS Tidy

Define everything on as low a level as possible (e.g. a default font family, colour and size in the body) and use inherit where possible

Examples

div.navi ul.menu#level1 { height: 40px; }

div.navi ul.menu#level2 { height: 20px; }

div.navi ul.menu#level3 { height: 16px; }

The markup for the menu will look like this:

<ul id="level1" class="menu"><li> ...... </li></ul>

<ul id="level2" class="menu"><li> ...... </li></ul>

<ul id="level3" class="menu"><li> ...... </li></ul>

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

Wrong:

div.red
{
    color: red;
}

as opposed to:

Good:

div.error
{
    color: red;
}

Resist the urge to over-specify class or id names. Use contextual or descendent selectors. 

Wrong:

<ul id="nav">
 <li class="navItem"><span class="itemText">Nav Item</span></li>
 <li class="navItem"><span class="itemText">Nav Item</span></li>
</ul>
 
#nav { }
#nav .navItem { }
#nav .itemText { }

Good:

<ul id="nav">
 <li><span>Nav Item</span></li>
 <li><span>Nav Item</span></li>
</ul>
 
#nav {}
#nav li {}
#nav li span {}

if there is a conflicting rule, specificity decides which rule wins

An element-wide rule (like p {color:green;}) will be trumped by:
A class-specific rule (like p.sidenote {color: blue;}), which will be trumped by:
An id-specific rule (like p#final {color: red;}), which will be trumped by:
An inline declaration (like <p style="color: orange;">), which will be trumped by:
An important rule (like p#final {color: inherit !important;})

Reset.css

*{margin:0;padding:0}iframe,a img,fieldset,form,table{border:0}h6,h5,h4,h3,h2,h1,caption,th,td{font-size:100%;font-weight:normal}dd,dt,li,dl,ol,ul{list-style:none}legend{color:#000}button,select,textarea,input{font:100% serif}table{border-collapse:collapse}caption,th,td{text-align:left}p, h1{margin:0;padding:0;bording:0}

http://www.htmlhelp.com/reference/css/properties.html

http://www.onlinetools.org/articles/cssguides.html

https://foundation.zurb.com/sites/download.html/

https://getbootstrap.com/

http://smacss.com/  super