FrontenD

Ninja

Talk

about

SMACSS, BEM, Resilience and CSS Hacks

Content



  1. Stuff (which is nice to know)
  2. SMACSS
  3. BEM
  4. Resilience

NICE TO KNOW



CSS gets evaluated from right to left

NICE TO KNOW


These are inefficient

  • *
  • overly qualified selectors
    • div#test
  • :hover for non-link elements

Nice to know


* + * {
  margin-top: 1em;
}

VS

* {
  margin-top: 1em;
}

*:first-child {
  margin-top: 0;
}

SMACSS

Scalable and Modular Architecture for CSS





Problem to be solved

  • CSS gets unmaintainable
  • Small changes
    • Take a lot of time
    • have unpredictable influences consequences

The Concept



  • OOCSS (Structure your CSS like your code)
  • Don't go deeper than 2 or 3 levels in nesting
  • Only extend and don't redeem previous rules
  • Only use classes (Exception: base rules)

Base.css


Resets & Styles for all elements



*{ box-sizing: border-box; }
html, body { width: 100%; }

LAYOUT.CSS


  • Only rules that define the position of an element
  • Define the grid and sections


.l-grid {   list-style-type: none;   & > li {      display: inline-block;   }}

Modules

progressbar.css | modal.css | slider.css | Event.css


  • Put UI components together
  • Prefix the classes
    • long name: good idea
    • generic name: maybe a bad idea 
  • As small as possible
    • so they can be reused & composed

Modules



.sidebar {
  // Stuff
}

.sidebar-fixed {
  // other stuff
}

.sb-content {
  // yet stuff
}

Modules

States


Set per JS, representing the current state of a module

  • :hover, :focus, :target
  • .is-collapsed, .is-sliding, .is-active

Themes



Only for large projects, with more than one color scheme
(theme_black.css => btn-black {}, sb-black {}, ...)

Pros



  • loose coupling
  • higher modularity 
  • CSS organized like your code
  • increase semantics
  • reuse and composition
  • structure is reusable

CONS



    • More Classes in HTML
      • <button class="btn btn-primary btn-disabled">

Sass (>= 3.3) To the rescue


 .event-sidebar {   // bad news here :(
   @extend .sidebar, .sidebar-footer;
   //good news here :)   &-element {     // Do some stuff   }   &-footer {     // Do other stuff   }}

Stats on FC



Stats on DIY



BEM


  • Block
  • Element
  • Modification

BEM



  • Block                   => Modul
  • Element
  • Modification => State

Bem


 .sidebar {
   left: 0;
   &--right {
     // Modification
     right: 0;
     left: inherit;
   }
   
   &__footer {
     // Sub element   }
}

Resilience

=/=


Resilience

Target


  • Low time to screen
  • Give the user an appropriate
    experience as soon as possible

Progressive ENhancement

Structure your loading


  1. Content
  • main content 
  • Styling to show it
    • layout (to minimize "jumps")
  • Enhancement
  • Leftovers

    • PROGRESSIVE ENHANCEMENT

    STRUCTURE YOUR LOADING


    1. Content
    2. Enhancements
    • JS
      •  Slider
      • Tooltips
    • Additional Images
  • Leftovers

    • PROGRESSIVE ENHANCEMENT

    STRUCTURE YOUR LOADING


    1. Content
    2. Enhancements
    3. Leftovers
    • Analytics
    • Ads

    The Problems



    • Network
    • Scripts
    • CSS
    • Fonts

    Network


    1. DNS Lookup Time
    2. Connect Time
    3. Redirect Time (Go back to 1)
    4. SSL Handshake Time
    5. Time to first Byte


    Remember:  about 15k is the first TCP frame

    Scripts

    normal

                           

    SCRIPTS

    Async

                           


    SCRIPTS

    Defer

                           


    Scripts


    Use a defer attribute as often as possible, 
    but keep in mind:

    The defer attribute is a promise to the browser, that the JS won't  be changing the DOM tree & cause extensive loading / rerendering

    Fonts


    Most Browsers (except IE) don't show a thing,
     unless font is loaded. Use JS to load it! 


    h1 {
  font-family: $fallbackfont, serif; 
}

.awesomefont-loaded h1 {
  font-family: awesomefont, serif;
}

    CSS


    inline the core CSS (combined with HTML max 15kB)

    CSS


    inline the core CSS (combined with HTML max 15kB)

    Problem: Core CSS is hard to identify and maintain


    optimize all the things



    • Yes
    • No
    • Well, measure it!

    The END


    Feedback?




    Made with Slides.com