Stripping down your CSS

CSS frameworks like Bootstrap can dramatically speed-up prototyping and frontend development. But at the same time, they introduce bloated CSS codebase at the very beginning. Luckily, we have automated tools which will help us solve these issues. This talk will be about UnCSS project - when to use it, how to use it and real-world examples.

Transcript

1. Primoz Cigler, @primozcigler Stripping down your CSS
3. ❄ 01. WHY?
5. They are COOL BUT they introduce BLOAT
6. • reset/normalize • grid • default tags styling • components • ...
7. “excessive unused styles are likely to cost more, performance wise, than any selectors you chose so look to tidy up there second.” Ben Frain http://benfrain.com/css-performance- revisited-selectors-bloat-expensive- styles/
10. Can we serve only CSS our site actually use?
11. ❄ 02. WHAT?
12. UnCSS Automation tool for deleting unused CSS selectors
13. http://addyosmani.com/blog/removing-unused-css/
16. 1. The HTML files are loaded by PhantomJS and JavaScript is executed. 2. Used stylesheets are extracted from the resulting HTML. 3. The stylesheets are concatenated and the rules are parsed by css-parse. 4. document.querySelector filters out selectors that are not found in the HTML files. 5. The remaining rules are converted back to CSS.
18. ❄ 03. HOW?
19. It’s easy
20. or NOT!
22. 96% smaller size down the wire
23. There are plugins for Grunt, Gulp, Broccoli or Brunch
24. ❄ 04. WHEN?
25. Let’s be realistic ...
26. • large-scale projects • long-lasting projects • static site generators
27. 96% smaller size down the wire
28. 84% smaller size down the wire
29. GZIP is still THE KING
30. Primož Cigler @primozcigler primoz@proteusnet.com
31. Images • http://photodune.net/item/legs-and-panties/10250104?ref=ProteusThemes • http://www.opencodez.com/wp-content/uploads/2013/11/Responsive-CSS-Frameworks.png • http://i.giphy.com/Ookneby9ez19C.gif • http://rocketdock.com/images/screenshots/trashicon.png • http://i.giphy.com/P149O6rcGctgI.gif • https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png