$30 off During Our Annual Pro Sale. View Details »

The Hidden Features Of CSS

The Hidden Features Of CSS

Learn how CSS works under the hood, how to optimize your CSS for performance and buttery-smooth animations, and discover a few features CSS has to offer you might not have know about but should be using. Plus, a few ninja SCSS tricks to boot.

Kevin Dees

October 17, 2019
Tweet

More Decks by Kevin Dees

Other Decks in Programming

Transcript

  1. CSS POTLUCK

    View Slide

  2. View Slide

  3. BENIFITS OF A
    POTLUCK

    View Slide

  4. THE HIDDEN
    Features of CSS

    View Slide

  5. CRITICAL PATH

    View Slide

  6. NOTHING RENDERS UNTIL
    THE CRITICAL PATH IS DONE

    View Slide

  7. UNTIL CSS IS DONE-DONE NOTHING RENDERS

    View Slide

  8. GOOGLE DOESN'T LIKE
    RENDER BLOCKING CSS

    View Slide

  9. View Slide

  10. INLINE THE CSS

    View Slide







  11. Document
    body { background: red; color: #fff;}


    Content



    View Slide

  12. DON'T @import

    View Slide

  13. BODY LINKS

    View Slide




  14. ...
    body { background: red; color: #fff;}


    content

    sidebar

    footer


    View Slide

  15. FIREFOX

    View Slide


  16. View Slide

  17. JS IS BLOCKED BY CSS!

    View Slide

  18. CDN FOR CSS CAN
    BE BAD

    View Slide

  19. BASE 64 ENCODED
    IMAGES IN CSS BE BAD

    View Slide

  20. HTTP2
    DOWNLOADS LOTS OF FILES AT

    View Slide

  21. CDN

    View Slide

  22. JAVASCRIPT
    DEFER AND
    ASYNC

    View Slide





  23. View Slide

  24. JS IS BLOCKED BY CSS!

    View Slide





  25. View Slide





  26. View Slide

  27. ASYNC CSS?

    View Slide



  28. JS and CSS preload example







    View Slide

  29. CSS PROCESSING
    ORDER

    View Slide

  30. KEY SELECTOR

    View Slide

  31. #NAV LI A {}

    View Slide

  32. DON'T OVER QUALIFY SELECTORS
    #nav li a {}
    #nav a {}
    better yet
    .nav-link {}

    View Slide

  33. METHODOLOGIES
    ▸ Atomic
    ▸ OOCSS
    ▸ SMACSS
    ▸ BEM

    View Slide

  34. ▸ Tailwind
    ▸ Tachyons

    View Slide

  35. PARSE SPEED

    View Slide

  36. #nav
    .nav-link
    .nav-link span
    .nav-link *
    *

    View Slide

  37. ▸ ID, e.g. #header
    ▸ Class, e.g. .promo
    ▸ Type, e.g. div
    ▸ Adjacent sibling, e.g. h2 + p
    ▸ Child, e.g. li > ul
    ▸ Descendant, e.g. ul a
    ▸ Universal, i.e. * // Attribute, e.g. [type="text"]
    ▸ Pseudo-classes/-elements, e.g. a:hover

    View Slide

  38. EXPENSIVE CSS PROPERTIES
    NTH-CHILD, FILTER, BOX-SHADOW

    View Slide

  39. INEXPENSIVE
    POSITION, SCALE, ROTATION AND OPACITY

    View Slide

  40. LAYOUT
    PAINT
    COMPOSITE

    View Slide

  41. CSS TRIGGERS
    HTTPS://CSSTRIGGERS.COM/

    View Slide

  42. View Slide

  43. COMPOSITE BE LIKE
    requestAnimationFrame

    View Slide

  44. View Slide

  45. SCSS TRICKS

    View Slide

  46. VARIBALES
    $cols: 12;
    $gutter: 20px;
    @for $col from 1 through $cols {
    .col-#{$col} {
    $pw: percentage($col/$cols);
    width: calc(#{$pw} - #{$gutter - $gutter / $col });
    }
    }

    View Slide

  47. FUNCTIONS

    View Slide

  48. #{ $var and func() }

    View Slide

  49. background: inline-svg("");

    View Slide

  50. @function inline-svg($string) {
    @return url('data:image/svg+xml,#{url-encode($string)}');
    }

    View Slide

  51. CONDITOIONALS

    View Slide

  52. $base-transition: 250ms all ease-in-out;
    $transitions: true;
    .#{$card}-details {
    background: #fff;
    @if ($transitions) {
    transition: $base-transition;
    }
    }

    View Slide

  53. & & &

    View Slide

  54. $card: card;
    .card {
    &-enclosed {}
    &.active, &:hover, &:focus {}
    }

    View Slide

  55. .card-enclosed {}
    .card .active, .card :hover, .card:focus {}

    View Slide

  56. SASS @extend
    AND MIXINS

    View Slide

  57. .error {
    border: 1px #f00;
    background-color: #fdd;
    &--serious {
    @extend .error;
    border-width: 3px;
    }
    }

    View Slide

  58. .error, .error--serious {
    border: 1px #f00;
    background-color: #fdd;
    }
    .error--serious {
    border-width: 3px;
    }

    View Slide

  59. @mixin reset-list {
    list-style: none;
    }
    nav ul {
    @include reset-list;
    li {
    display: inline-block;
    }
    }

    View Slide

  60. nav ul {
    list-style: none;
    }
    nav ul li {
    display: inline-block;
    }

    View Slide

  61. IE 9, 10, 11 DIE
    JANUARY 10TH?

    View Slide

  62. CSS VARABLES

    View Slide

  63. :root {
    --main-bg-color: coral;
    }
    #div1 {
    background-color: var(--main-bg-color);
    }

    View Slide

  64. SCOPING

    View Slide

  65. /* default color */
    :root { --color: blue; }
    div { --color: green; }
    .myclass { --color: red; }
    /* applies the --color property at all the above levels */
    * { color: var(--color); }
    blue
    green

    red
    red

    View Slide

  66. @supports

    View Slide

  67. @supports (display: grid) and (flex: 1) {
    /* your rules */
    }
    @supports not (display: grid) or (flex: 1) {
    /* your rules */
    }

    View Slide

  68. HOUDINI

    View Slide

  69. Thanks, Kevin
    @kevindees
    https://kevdees.com

    View Slide