title: Re-learning CSS the right way
body: <p>I am a programmer doing web development for over two years now. Even though I’ve been doing front end engineering for the past two years I don’t think I have done it the right way<br>
  <strong><em>For instance:</em></strong>  </p>
  
  <ul>
  <li>I still do layout with tables and not with just CSS. I haven’t still found out a way to correctly present data aligned and tabular.</li>
  <li>I don’t know the difference between <code>display: none</code> and <code>visibility: hidden</code> (well, I know it now. but there are many cases like- padding, margins, overflows etc)</li>
  <li>I haven’t really followed the inheritance way to writing CSS. Almost every style starts with a <code>#</code> and not a class.</li>
  <li>Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.</li>
  <li>I don’t know what this picture in firebug is conveying (by the way, firebug is my savior. Life would have been impossible without Firebug)</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/lrd9j.png" alt="alt text"></p>
  
  <ul>
  <li>Whenever layout’s in a mess I am tempted to use position:absolute. Invariably it ends up in a bigger mess.</li>
  </ul>
  
  <p>I know I am doing a lot of things wrong(and I need to get it right) here but I manage to get things into place and somehow show it up, only to see it messed up in a different browser.  </p>
  
  <p>I don’t want do a primer on CSS or CSS for dummies. I know more than that. I want to learn CSS the right way. Focusing on problems like the examples I showed above and rectifying them.   </p>
  
  <p>Can you point me to resources or add common suggestions and tips used by CSS developers to get it right.</p>