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.

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