About 13 years ago when found out it was a good idea to separate structure (html) and styling (css). Since then it's just been a steady flow of small pleasant surprises.

nav li+li { margin-left: 8px; }

To space lists. No more :first-child / :last-child.

Some of these had me absolutely stunned lately.

That's actually very interesting that people don't know/use this though because I used this in the first website I made.

But, what I learned a bit late is

and I hated myself for wasting time for calculating the widths and heights of the divs according to paddings and margins which took my whole day.

Edit: I should add how I felt

When I finally realized that the problem was with CSS, not with me.

Equal width and height box without pixel values. Here's a fiddle - http://jsfiddle.net/chn6bkx7/1/

Set the height to 0 and padding-bottom equal to the width. Width is relative to the container so this technique is particularly useful if you're using a grid system (set box to 100%).

Sliding doors of CSS - seminal article on how to make css menus. Pretty much changed how I built sites overnight

http://alistapart.com/article/slidingdoors

The day I discovered:

Using bezier curves for transitions. It changes everything.

transition-timing-function: cubic-bezier(0.175, 0.8, 0.3, 1.275);

Would have to be overflow: hidden; for me

I think as Flexbox matured it really blew me away. No more awkward floating and absolute positioning to change up core layout.

Biggest, not first:

Flexbox.

Resets helped alleviate some frustration and gave me a better understanding of CSS. Many years later, Sass made me a better and faster developer. But Flexbox had the greatest impact on the quality of my work. It just freed up so much mental bandwidth.

I think mine was realizing that IE3 and NN4 not only didn't implement the same CSS, it implemented the same CSS differently in some cases.

That was when I realized that CSS inconsistent browser implementation and behavior was what would keep my paychecks coming for many years.

Mine was realizing that if I could just get one container div into the right position, then I could forget about everything else and treat that div as if it were an entire document, and lay things out inside of it.

Then recursively do that and layouts of any complexity become completely simple.

When I realized that, my speed increased a ton and I observers thought I was a CSS god. Which I am. ;)

When I learned about clearfix and finally could start using CSS floats for layouts instead of tables.

background-size: cover

Couldn't live without it (use nasty background-size: 133% hack for older browsers, it's just a number that seems to work)

Back in the time of table-based layouts, I was asked in a demo meeting if the website I was building would have a text-only, accessible version available (remember those?)

I disable CSS in the browser and boom, there you go.

Also special mention to techniques like sliding doors for making background images easier and killing off the need for loads of inline transparent .gifs

Proper @font-face support and killing off the nightmare that was sIFR was a pretty special moment too!

Learning to build graphics and animate them with CSS3 was eye opening.

There have been so many, but probably the one that made the biggest impact on me was when I realized I could make inline elements block, and vice versa.

I think one of mine is that any element it doesn't matter what it is for the most part their display can be anything eg: block, inline, inline-block

In my early days of learning CSS it was learning the difference between block and inline elements and what floats do based on order in the markup.

Centering stuff vertically with line-height.

My first laptop, bar wifi, a pint of guinness, and viewing source on a site a client liked.

clearfix

It was on how to do image replacement which was later used for things like CSS sprites by Dave Shea in 2003: http://www.mezzoblue.com/tests/revised-image-replacement/

When I started working with :before and :after pseudo elements ... brings a tear to my eye.

Pseudo element content.

When I found out about border/outline-based debugging :D

when i've discovered that i could set a position fixed element relative to a container using margin-left:0; margin-top: 0; (and other margin values) or by setting transform: translateZ(0) on the parent.

It's not straightforward (not easy on more complex nested structures), but with some experimentation, could be very useful on boxed layouts with sticky sidenavs!

stackoverflow inspiration

Lots of years back when I first discovered Eric Meyer's CSS reset and then later on with the DIV-clear hack for CSS floating.

I must say the trick in that StackOverflow is a really useful one. bookmarked Thanks!