35 comments

  • Martin LeBlancMartin LeBlanc, 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
  • Joris RigerlJoris Rigerl, 5 years ago

    Some of these had me absolutely stunned lately.

    8 points
  • Benjamin den BoerBenjamin den Boer, 5 years ago

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

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

    8 points
  • Sacha GreifSacha Greif, 5 years ago

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

    7 points
  • Cihad TurhanCihad Turhan, 5 years ago (edited 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, 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
    • Sebastian De DeyneSebastian De Deyne, 5 years ago

      I use this trick to create fixed-ratio elements so they're always a perfect fit for their background-image.

      0 points
  • David PerelDavid Perel, 5 years ago

    Would have to be overflow: hidden; for me

    2 points
  • Wojtek Wojtek , 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
  • Nathan NNathan N, 5 years ago (edited 5 years ago )

    The day I discovered:

    *{margin:0;padding:0;}
    2 points
    • Alfonse SurigaoAlfonse Surigao, 5 years ago (edited 5 years ago )

      You should update to this instead:

      *,*:before,*:after {margin: 0;padding:0;}

      2 points
  • Colm TroyColm Troy, 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
  • Matt SistoMatt Sisto, 5 years ago (edited 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, 5 years ago (edited 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
  • Nick SchadenNick Schaden, 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
  • Nathan ManousosNathan Manousos, 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
  • Jim SilvermanJim Silverman, 5 years ago

    clearfix

    0 points
  • Hendrik Runte, 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, 5 years ago (edited 5 years ago )

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

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

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

    0 points
  • Aundre KerrAundre Kerr, 5 years ago

    Pseudo element content.

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

    Centering stuff vertically with line-height.

    0 points
  • Alin PuriceAlin Purice, 5 years ago

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

    0 points
  • Rick KhannaRick Khanna, 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
  • Steve McKinneySteve McKinney, 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
  • Raffaello SanzioRaffaello Sanzio, 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
  • Renato de LeãoRenato de Leão, 5 years ago (edited 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
  • Jason DeLosSantosJason DeLosSantos, 5 years ago

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

    0 points
  • Ronan Flynn-CurranRonan Flynn-Curran, 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
  • Dean HaydenDean Hayden, 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
  • Erik DjupvikErik Djupvik, 5 years ago

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

    0 points
  • Catalin CimpanuCatalin Cimpanu, 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