Tree shaking is a technique to remove unused code from bundles to reduce file size. It analyzes import and export statements to determine unused code, which can then be excluded from the bundle. CSS frameworks like Bootstrap often include unused code by default that tree shaking tools can remove to minimize file size. Tools like UnCSS analyze CSS usage on a page to remove unused styles, but have limitations and an easier alternative is to only import needed components from frameworks during the build process.

1. Tree shaking your CSS
Or does your CSS tree shake you?

2. • What is tree shaking? 1
1
source: http://geekwagon.net/projects/xkcd1190/?
frame=2142

3. • What is tree shaking?
• What is the benefit?

4. • What is tree shaking?
• What is the benefit?
• Are you a tree shaker?

5. How CSS goes IRL...
•Add something like Bootstrap (Maybe
with NPM)
•Use some bits of it
•Write copy-paste some CSS

6. Maybe you get fancy
•Custom Bootstrap generation
•Some Framework specific
implementation (Reactstrap)
•Add a Sass or Less build pipeline

7. Worst case
•Start dropping combinations of
frameworks
•Can I use Bootstrap with Material with...
•Not knowing what CSS CDN imports are
doing

8. A good process
•Start with CDN if you don't have a starter
project
•As you move towards production and
testing create a build process
•KISS

9. Some good tools
•Gulp.js (or Grunt) Autoprefixer
•Sass and node-sass
•Start build buliding a single file

10. MYTH! CSS Framework Bloat
•Most modern projects are modular by
nature: ZURB Foundation, Bootstrap, etc.
•These options are turned off by default
•If you use customize Bootstrap you are
already doing this

11. Just a tool not a process
•Take what you want, leave the rest
•Good examples of large project
architecture
•Are the largest and most widely used
Design Systems in the world

12. Whats the situation
wget https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
du -hs bootstrap.min.css
144K bootstrap.min.css
npm install bootstrap
du -hs node_modules/bootstrap/dist/css/bootstrap.min.css
140K node_modules/bootstrap/dist/css/
bootstrap.min.css

13. Bootstrap Sass "blanket" import
@import "bootstrap";
136K dist/assets/css/app.css

14. Minimalism in Bootstrap
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "badge";
@import "alert";
@import "close";
@import "modal";
52K dist/assets/css/app.css

15. Mixins only ZERO CSS
@import "functions";
@import "variables";
@import "mixins";
0B dist/assets/css/app.css

16. BlueprintJS
yarn add @blueprintjs/core react react-dom
blueprintjs › du -hs node_modules/normalize.css/normalize.css
8.0K node_modules/normalize.css/normalize.css
blueprintjs › du -hs node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css
4.0K node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css
blueprintjs › du -hs node_modules/@blueprintjs/core/lib/css/blueprint.css
296K node_modules/@blueprintjs/core/lib/css/blueprint.css
308k Total

17. The Nuclear Option

18. UNCSS
The Nuclear Option

19. Except...
UnCSS only runs the Javascript that is run
on page load. It does not (and cannot)
handle Javascript that runs on user
interactions like button clicks. 2
2
source: https://www.npmjs.com/package/uncss

20. Except (Cont.)...
You must use the ignore option to
preserve classes that are added by
Javascript on user interaction. 2
2
source: https://www.npmjs.com/package/uncss

21. There is an
easier way

22. James Stone in Finland
According to LinkedIn, I am the only one at the moment...
@JamesStoneCo @ComposingCode