Re-learning CSS the right way

css, frontend, user-interface

Solution

Check out Designing With Web Standards by Jeffrey Zeldman.

Problem

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.

Original source