Saving the web 1kb at a time

CSS Stats Animations by Kai

Mo code, mo problems

You may not know, but your CSS is getting out of control, it may even have a mind of its own. The specificity war is happening right now and you might not even know it.

Is your file always getting bigger? Are you adding stuff to the end of the file? You are showing symptoms of CSSitis. May be linked to Divitis, you can get it treated, but you have to act fast.

Users time should be the highest priority. More code, more potential bugs, more time fixing things. A product should be fast, systematic and maintainable.

Pinterest
1180kb

Medium
674kb

Tachyons
40kb

Stack overflow
600kb

Airbnb
356kb

42 Popular sites and frameworks

CSS File Size - kb

CSSitis is a condition that causes performance and maintainability issues. It may even keep you up at night, it's a scientific word for - too much css.

Highest specificity score

Excessive use of nesting in sass and use of !important effects performance. Remember the Inception rule, three levels down, you could lose sight of what's real. It will become hard to read for your team, so aim for two levels. Using too many ID's instead of classes will clog the users browser.

The specificity war is happening

Stats from CSS Stats. Have an idea? @csspurge, roy[at]csspurge.com and Github.

Case studies

Unsplash

How I reduced the total score from 252 to 61 with a 76% reduction.

Totals

462

Highest floats

Did you know there are only three floats?


  .fl { float: left; }
  .fr { float: right; }
  .fn { float: none; }

176

Highest colors

How many colours does a brand have? Fifty shades of grey is the exception. It's possible to just have one color for all tags and then one for links


  $black: #111111;
  $blue:  #0074D9;

  body { color: $black; }
  a { color: $blue;  }

89

Highest font sizes

By default the web has provided 9 tags to give you a robust scale


  body { font-size: 16px; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1rem; }
  h6 { font-size: 0.875rem; }
  p { font-size: 1rem; }
  small { font-size: 0.875rem; }

  // On a large screen
  // Font size on the body with rem
  // set on elements will increase in size
  @media only screen and (min-width: 64em) {
   body {
    font-size: 18px;
   }
  }

31

Highest Font families

It is recommended to have two fonts: one for the body and one for headings. Perhaps other fonts are used to support different languages?


  $copy:      SF UI Text, Arial, sans-serif;
  $heading:   SF UI Display, Arial, sans-serif;

  body { font-family: $copy; }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-family: $heading;
  }

512

Highest Specificity score

Frameworks are as low as 50. Too many declarations can lead to performance issues and bugs. Some sites graph is very spikey at the beginning meaning a bigger hit on the site load when the user first visits.

To style an element that requires unique styling such as a sign up link, there are many ways to target it.


  <nav>
      <ul>
          <li><a href="#">Features</a></li>
          <li><a href="#">Products</a></li>
          <li><a class="btn" href="#">Sign Up</a></li>
      </ul>
  </nav>


    // A. You could do this
    nav ul li a.btn { }

    // B. or simply
    .btn { }

According to the specificity war powers option A would be Vader:

A:

14

1+1+1+1+10

B:

10

10

Points:

  • (1) Element Selector
  • (10) Class Selector
  • (100) ID Selector
Another good reason to use classes over ID's

74

Highest Media Queries

320 and up looks at 4 sizes on average. To cater for every screen is counter intuitive. New devices and screens will emerge, then you have to code for another screen. Take reference from Bruce Lee "be like water my friend".


  $mw-s:  320px;
  $mw-m:  768px;
  $mw-l:  1024px;
  $mw-xl: 1382px;

  // Mobile
  @media screen and (min-width: $mw-s) {

  }

  // Tablets
  @media screen and (min-width: $mw-m) {

  }

  // iPads
  @media screen and (min-width: $mw-l) {

  }

  // Powerbooks
  @media screen and (min-width: $mw-xl) {

  }

7

Highest Style Links

More external stylesheets will mean more http requests, page speed effected.


  <!-- Good for maintanence but bad for performance -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/type.css">
  <link rel="stylesheet" href="css/grid.css">
  <link rel="stylesheet" href="css/colors.css">
  <link rel="stylesheet" href="css/modules.css">

Tools like Sass and Gulp can combine all stylesheets into one.

Example folder structure:

project/

  css/
  node_modules/
  sass/
  gulpfile.js
  index.html
  package.json

sass/

  _base.scss
  _type.scss
  _grid.scss
  _colors.scss
  _modules.scss
  styles.scss

gulpfile.js

  // 1. Use gulpjs to get all your sass partials
  gulp.task('workflow', function () {
    gulp.src('sass/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass().on('error', sass.logError))
      .pipe(cssnano())
      .pipe(sourcemaps.write('./'))
      // 2. Output to a single css file
      .pipe(gulp.dest('css/'))
      .pipe(browserSync.reload({stream:true}));
  });


  <!-- Voilà! -->
  <link rel="stylesheet" href="css/styles.css">

Kickstarter
Highest score

2016

Default or die

HTML template

html5 boilerplate

CSS toolkit

Tachyons

CSS preprocessing

Sass

Build system 1

Grunt

Build system 2

Gulp

Text editors

Atom, Vim

Stats

CSS stats

Open source

Github

Linting

Csslint

Structure

SMACSS

Writing

OOCSS

Naming

BEM

Components in JavaScript

React

Recommend a tool?

@csspurge

Gulp uncss

Gulp uncss

I reduced CSS Purge from 55kb to 9kb

Did I mention all these tools are free? Rather than reinvent the wheel everytime, some developers and designers have done some amazing things. Good to default from these tools. Collaboration is key.

Articles

avatar

Optimize CSS delivery

- Patrick Sexton

avatar

Loading time

- Sean Work

avatar

The specificity graph

- Harry Roberts

avatar

CSS and scalability

- Adam Morse

avatar

Rethinking variables in CSS

- Brent Jackson

Talks

Daniel Eden DotCSS 2015 - Move slow and fix things

Daniel Eden: Move Slow and Fix Things

DotCSS–2015

Adam Morse: Things I’ve Learned About CSS

CSSConf–2014

Adam Morse CSSConf 2014 - Things I've learned about CSS
Harry Roberts Dafed 2014 - Managing CSS Projects with ITCSS

Harry Roberts: Managing CSS Projects with ITCSS

DaFED–2014

Subscribe for survival tips