Optimize existing CSS

Selectors

div ul li .special

Optimize existing CSS

Selectors

div ul li .special

1

Optimize existing CSS

Selectors

div ul li .special

1

2

Optimize existing CSS

Selectors

div ul li .special

1

2

3

Optimize existing CSS

Selectors

1

2

3

4

div ul li .special

Optimize existing CSS

Optimize images

• image size is a secondary problem
• the bottleneck is establishing the connection
• the total file size is bigger, but it's still worth it
• image sprites to the rescue!

Optimize existing CSS

Optimize images

• background-position
• what about the image tag?
• semantic HTML + SEO
• if you really need it: example #3

Optimize existing CSS

Optimize images

Data URI

Optimize existing CSS

Optimize images

• not HTTP request at all
• hard to maintain, bad for readability

Optimize existing CSS

Optimize images

Icon fonts

Optimize existing CSS

Optimize images

• combine multiple images in a single request
• small size
• good scalability
• deep browser support (IE8+)
• limited number of images (64)
• only one colour (stacking may be an option)

Optimize existing CSS

Optimize images

SVG images

Optimize existing CSS

Optimize images

• it's the future, but it's not quite there yet
• single colour
• incomplete browser support

Optimize existing CSS

Best practices

• naming: it should be based on use, not on properties
• avoid redundancy
• use short forms

Optimize existing CSS

Best practices

.foo {

  color: red;

  font-size: 24;

  padding: 10;

}

.bar {

  color: blue;

  font-size: 24;

  padding: 10;

}

.foo, .bar {

  font-size: 24;

  padding: 10;

}

.foo {

  color: red;

}

.bar {

  color: blue;

}

Preprocessors to the rescue!

Which one?

• Sass, SCSS
• LESS
• Turbine
• Stylus
• Switch CSS

Preprocessors to the rescue!

Which one?

Sass

• older
• the ruby implementation used to be slow
• node.js implementation
• invalid CSS (SCSS helps)

Less

• backed by Bootstrap (Twitter)
• code is similar to CSS
• designer friendly documentation
• class == mixin

Preprocessors to the rescue!

Variables

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Preprocessors to the rescue!

Variables

$font-size-xl: 40px;

h1 {
  font-size: $font-size-xl + 5;
}

h1 {
  font-size: 45px;
}

Preprocessors to the rescue!

Nesting

nav {
  color: #000;

  ul {

    list-style: none;

  }
}

nav {
  color: #000;

}

nav  ul {

  list-style: none;

}

Preprocessors to the rescue!

Nesting

nav {
  color: #000;

  ul {

    list-style: none;

  }
}

nav {
  color: #000;

}

nav  ul {

  list-style: none;

}

Preprocessors to the rescue!

Nesting

.slider {
  width: 100%;

  &-element {

    width: 25%;

  }
}

.slider {
  width: 100%;

}

.slider .slider-element {

  width: 25%;

}

Preprocessors to the rescue!

Nesting

.button {
  color: $color-primary;

  &:hover {

    color: $color-highlight;

  }
}

.button {
  color: #bada55;

}

.button:hover {

  color: #c0ffee;

}

Preprocessors to the rescue!

Nesting

• don't go overboard: maximum 3 levels
• use it for namespacing
• watch out for long class names

Preprocessors to the rescue!

Partials, Imports

_partial.scss

@import 'partial'

nav {
  color: #000;

}

Preprocessors to the rescue!

Partials, Imports

• not the same as CSS @import (won't cause FOUC)
• create a main.scss to gather all the partials (table of contents)
• modularization helps reusability, but don't go overboard

Preprocessors to the rescue!

Mixins

@mixin box() {

  display: inline-block;

  padding: 5px;

  box-sizing: border-box;

}

.button {

  @include box();

  background-color: #bada55;

}

.button {

  display: inline-block;

  padding: 5px;

  box-sizing: border-box;

  background-color: #bada55;

}

Preprocessors to the rescue!

Mixins

@mixin box($radius) {

  display: inline-block;

  padding: 5px;

  box-sizing: border-box;

  border-radius: $radius;

}

.button {

  @include box(10px);

  background-color: #bada55;

}

.button {

  display: inline-block;

  padding: 5px;

  box-sizing: border-box;

  border-radius: 10px;

  background-color: #bada55;

}

Preprocessors to the rescue!

Control directives

• almost like a real programming language
• @if
• @for
• @each
• @while

Preprocessors to the rescue!

Control directives

Example #4

How to CSS in 2015

Media queries and their friends

.box {

  width: 200px;

}

@media(max-width: 480px) {

  .box {

    width: 100%;

  }

}

How to CSS in 2015

Media queries and their friends

@media(max-width: $screen-xs)

  and (min-width: $screen-lg) {

  .box {

    width: 100%;

  }

}

• $screen-lg: 1200px
• $screen-md: 992px
• $screen-sm: 768px
• $screen-ss: 550px
• $screen-xs: 480px

How to CSS in 2015

Media queries and their friends

$desktop: "(min-width: 1024px)";

@media #{$desktop} {

  .box {

    width: 100%;

  }

}

How to CSS in 2015

Media queries and their friends

$desktop-width: 1024px;

@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}

p {
  font-size: 16px;
  @include desktop {
    font-size: 20px;
  }
}