35 comments

  • Martin LeBlancMartin LeBlanc, over 5 years ago

    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.

    14 points
  • Benjamin den BoerBenjamin den Boer, over 5 years ago

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

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

    8 points
  • Joris RigerlJoris Rigerl, over 5 years ago

    Some of these had me absolutely stunned lately.

    8 points
  • Sacha GreifSacha Greif, over 5 years ago

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

    7 points
  • Cihad TurhanCihad Turhan, over 5 years ago (edited over 5 years ago )

    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

    box-sizing: border-box;

    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

    7 points
  • Tom HareTom Hare, over 5 years ago

    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%).

    3 points
  • Colm TroyColm Troy, over 5 years ago

    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

    2 points
  • Nathan NNathan N, over 5 years ago (edited over 5 years ago )

    The day I discovered:

    *{margin:0;padding:0;}
    2 points
  • wojtek w.wojtek w., over 5 years ago

    Using bezier curves for transitions. It changes everything.

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

    2 points
  • David PerelDavid Perel, over 5 years ago

    Would have to be overflow: hidden; for me

    2 points
  • Nick SchadenNick Schaden, over 5 years ago

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

    1 point
  • Matt SistoMatt Sisto, over 5 years ago (edited over 5 years ago )

    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.

    1 point
  • Andrew ZimmermanAndrew Zimmerman, over 5 years ago (edited over 5 years ago )

    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.

    1 point
  • Nathan ManousosNathan Manousos, over 5 years ago

    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. ;)

    0 points
  • Erik DjupvikErik Djupvik, over 5 years ago

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

    0 points
  • Dean HaydenDean Hayden, over 5 years ago

    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)

    0 points
  • Ronan Flynn-CurranRonan Flynn-Curran, over 5 years ago

    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!

    0 points
  • Jason DeLosSantosJason DeLosSantos, over 5 years ago

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

    0 points
  • Raffaello SanzioRaffaello Sanzio, over 5 years ago

    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.

    0 points
  • Steve McKinneySteve McKinney, over 5 years ago

    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

    0 points
  • Rick KhannaRick Khanna, over 5 years ago

    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.

    0 points
  • Roland IllésRoland Illés, over 5 years ago

    Centering stuff vertically with line-height.

    0 points
  • Brian ZelipBrian Zelip, over 5 years ago (edited over 5 years ago )

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

    0 points
  • Jim SilvermanJim Silverman, over 5 years ago

    clearfix

    0 points
  • Hendrik Runte, over 5 years ago

    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/

    0 points
  • Evan BriggsEvan Briggs, over 5 years ago (edited over 5 years ago )

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

    0 points
  • Aundre KerrAundre Kerr, over 5 years ago

    Pseudo element content.

    0 points
  • Alin PuriceAlin Purice, over 5 years ago

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

    0 points
  • Renato de LeãoRenato de Leão, over 5 years ago (edited over 5 years ago )

    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

    0 points
  • Catalin CimpanuCatalin Cimpanu, over 5 years ago

    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!

    0 points