Re-learning CSS the right way [closed]

Question

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
For instance:

• 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.
• I don’t know the difference between display: none and visibility: hidden (well, I know it now. but there are many cases like- padding, margins, overflows etc)
• I haven’t really followed the inheritance way to writing CSS. Almost every style starts with a # and not a class.
• Whenever a page loads slowly the html elements are out of place and fall into order only when it’s completely loaded.
• 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)

• Whenever layout’s in a mess I am tempted to use position:absolute. Invariably it ends up in a bigger mess.

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.

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.

Can you point me to resources or add common suggestions and tips used by CSS developers to get it right.

Answer 1

Check out Designing With Web Standards by Jeffrey Zeldman.

Answer 2

Here are some general rules to live by:

• Tables are good for tabular data. If the data you're presenting belongs in a table, don't go out of your way trying to make a grid out of <div>s. Doesn't make sense.
• As far as layout is concerned, use <div> tags, stay away from tables. Get to know the float property well. With CSS3, there are going to be new, improve standards to the display property. Learn them.
• display: none completely removes the element from the viewport. Conversely, visibility: hidden retains the whitespace that the element would have otherwise taken up. In both cases, the element remains in the DOM.
• General rule of classes and IDs. Page elements and IDs should have a one-to-one relationship per page. For example, #Column1, #Column2, #Footer, #Header. Page elements and classes, on the other hand, should be a many-to-one relationship, like: .container or .navLink. Use classes when you know you're going to be using a particular element quite a bit.
• Think in terms of efficiency. The less style rules you have, the more quickly your page will load and the easier style issues will be to debug.

I have about a million other things to say but that should get you started.