

 CSS Code Snippets To Make You A Better Coder - bogdans
http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/
It is almost impossible to gather in an article all the CSS code snippets that could help you in the future but here are some of the ones that you would need more often than others. Don’t get scared by the length of some of these CSS hacks’s code cause they’re all easy to implement and where is the case, they’re well documented. Besides the ones that solve common and annoying problems there are also some that solve new issues brought by the new technologies.
======
fredoliveira
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.

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 _a better coder_.

~~~
uscfan1781
I completely agree. When I first learned CSS it was largely through tips and
tricks like these, but without any sort of mental model or big picture
understanding of what was going on my progress was unimaginably slow. I had to
actually read part of the spec and start looking at and modifying stylesheets
used on real sites before I became at all comfortable.

~~~
mcantor
Was there a particular part of the spec you found illuminating / readable?

~~~
camtarn
When I was learning, I got really quite confused by the intersection of
floats, overflow and positioning. Reading the spec and actually understanding
all of the rules at the same time, rather than just what I could glean from
random hacking and tutorials, was really valuable.

------
forbes
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"

~~~
wippler
Can anyone point to a good CSS resource with more detailed explanations?

~~~
pbhjpbhj
<http://www.quirksmode.org/> is great for cross-browser stuff.

------
TamDenholm
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.

In my view its better to do that than use hacks.

~~~
forbes
I agree. Anytime I use a CSS hack it makes me feel dirty. An IE specific
stylesheet is an unfortunate necessity, but there seems to be a cottage
industry of people using browser-specific hacks for everything. It feels like
it goes against the whole spirit the CSS standard. Maybe it is a case of just
getting the job done, and being forced into nasty hacks by a half-dozen
browsers implementers who are supporting different parts of the standards on
their own schedule.

------
xentronium
Lots of the snippets mentioned (and even more that are not!) are already
included in compass (<http://compass-style.org>).

------
alttab
The first tip was when the title said CSS makes you a _coder_.

------
niyazpk
After struggling a lot with the browser specific hacks to target
IE/Webkit/Whatever, I have now switched to _CSS browser selector_ [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.

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 _support_ 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.

[1] <https://github.com/rafaelp/css_browser_selector/>

[2] [http://www.virtuosimedia.com/dev/css/ultimate-
ie6-cheatsheet...](http://www.virtuosimedia.com/dev/css/ultimate-
ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs)

~~~
kaylarose
I find I rarely need to target any browser other than IE with specific styles,
so I usually end up doing something like this, which doesn't rely on JS.

    
    
       <!--[if lt IE 7]><html lang="en" class="no-js ie ie6"><![endif]-->
       <!--[if IE 7]><html lang="en" class="no-js ie ie7"><![endif]-->
       <!--[if IE 8]><html lang="en" class="no-js ie ie8"><![endif]-->
       <!--[if IE 9]><html lang="en" class="no-js ie ie9"><![endif]-->
       <!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
    

Edit: And then remove the 'no-js' class with js

~~~
Pewpewarrows
Credit where credit is due:

[http://paulirish.com/2008/conditional-stylesheets-vs-css-
hac...](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-
neither/)

~~~
kaylarose
Actually I didn't know about that article, but is nice to see the origin of
this technique. Mostly took inspiration from HTML5 Boilerplate (also Paul
Irish), and previous articles I read. But yes, Paul Irish is awesome, and
deserves lots of credit.

------
abcd_f
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.

In other words - stay with a conservative font stack or do on the fly font
detection and restyle the document respectively.

------
emef
> "You don’t want it to come after the header on small content pages like a
> kid comes after candy. It is simply wrong."

Instantly stopped reading, what kind of freak writes about that.

------
KuraFire
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.

Also, sigh.

