CSS Code Snippets To Make You A Better Coder

This is the kind of list that works not to the advancement of standards-based creation, but its detriment. Firstly, the tips are just thrown out there, which will certainly not help the CSS novice understand the reasoning behind them. Second, they're mostly outdated/unnecessary. And third, as already mentioned in this thread, there's a case to be made for less hacks.<p>Regarding hacks specifically: if you feel like you need to use hacks, at least try to understand how they work and the problem they solve. i.e: don't just throw something out there to solve IE problems if you don't know what they mean. It's amazing how many people use box model hacks in their code but don't even know how the box model actually works. It is certainly one part of the spec that isn't really obvious for most people, but copying/pasting a few lines will certainly not make you <i>a better coder</i>.

I read all 31 snippets and I am still a terrible coder. Perhaps a better title would be "31 random CSS hacks, copied from other blogs, in no particular logical order"

Personally i believe that you should use the least amount of CSS hacks as humanly possible. The only one i use on a regular basis is clearfix. I usually dont have to use any others to get my layout working in everything except IE. I then use an IE specific style sheet (conditional comments) to break my layout for IE.<p>In my view its better to do that than use hacks.

Lots of the snippets mentioned (and even more that are not!) are already included in compass (<a href="http://compass-style.org" rel="nofollow">http://compass-style.org</a>).

The first tip was when the title said CSS makes you a <i>coder</i>.

After struggling a lot with the browser specific hacks to target IE/Webkit/Whatever, I have now switched to <i>CSS browser selector</i> [1] and never looked back. It simply saves a lot of time and effort. If you think about it, the User Agent String is the only accurate information that can be used to sniff the browser name and version, not some random CSS hack.<p>BTW the article is mostly useless for any practical use. If you really want to target IE6/IE7, this article [2] is a nice start. Learn about what types of bugs IE <i>support</i> and try to remember the name of the bug so that you can google a fix for it when you actually encounter one. As others suggested here, try to understand at least the basics of box model and how it is different in IE, but don't try to get a PhD in any IE bug you encounter. Fix it as fast as you can using whatever easy way out you can see an move on. There are better things to do in life.<p>[1] <a href="https://github.com/rafaelp/css_browser_selector/" rel="nofollow">https://github.com/rafaelp/css_browser_selector/</a><p>[2] <a href="http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs" rel="nofollow">http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet...</a>

A word of caution regarding "ultimate font stacks" - most of these are an utopia. Not all fonts have the same height and x-height (read - the same letter size and general visual appearance) at the same pixel size. Most notably, Constantia just does NOT work as a drop-in Georgia replacement. Nor does Calibri work as a Verdana substitute. They needs either a different font-size or line-height.<p>In other words - stay with a conservative font stack or do on the fly font detection and restyle the document respectively.

&#62; "You don’t want it to come after the header on small content pages like a kid comes after candy. It is simply wrong."<p>Instantly stopped reading, what kind of freak writes about that.

Knowing how to use CSS hacks to target specific browsers does not make you a better coder. Knowing how not to need those hacks makes you a better coder.<p>Also, sigh.