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

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

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

* {
  margin-top: 1em;
}

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

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

• 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)

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

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

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

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

.sidebar {
  // Stuff
}

.sidebar-fixed {
  // other stuff
}

.sb-content {
  // yet stuff
}

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

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

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

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

• Block
• Element
• Modification

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

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

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

1. Content

• main content 
• Styling to show it
• layout (to minimize "jumps")

STRUCTURE YOUR LOADING

1. Content
2. Enhancements

• JS
•  Slider
• Tooltips
• Additional Images

STRUCTURE YOUR LOADING

1. Content
2. Enhancements
3. Leftovers

• Analytics
• Ads

• Network
• Scripts
• CSS
• Fonts

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

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

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

• Yes
• No
• Well, measure it!