- Developers often leave unused CSS rules in style sheets from old code or libraries. This wastes bandwidth and slows page loads. - The document describes a proof of concept that uses uncss, grunt-uncss, and PhantomJS to automatically remove unused CSS rules from style sheets based on the DOM elements found on sample pages. - It generates a new "all.min.un.css" file that is significantly smaller than the original style sheets, saving on file size and improving performance.

1. Why it is matter?
• Developer always adding the new rules in stylesheet and left the old
rules ( become unused styles ).
• A lots of libraries that we used provide a lots of themes in their
stylesheets, but we only use one of them.

2. Unused styles in stylesheet
• Developer A create one class for buttonA as below
.buttonA { … }
• We redesign the button into bigButton, smallButton etc
• Because of we afraid the buttonA still be used as a selector or as a
style, we retained it.

3. Libraries bundled with Stylesheets
• Common practice for UI libraries, they like to provide a themes e.g.
default theme, ocean theme, modern theme etc
• Common practice for developer is use the default theme and adding
the custom style on it.

4. Auto remove unused CSS
• People start to spend an efforts to solving this problem.
• Ucss by opera, deadweight, CSS slap chop, Helium-CSS, CSSESS and
Python mincss
• Unfortunately, most of the solutions don’t actually generate what
we are really after.
• Danny Walsh created uncss as a node module, integrated it with
phantomJS, Addy Osmani create the grunt-plugin for uncss ( we
have choose this for our POC ).

5. Removed unused CSS POC
• Install phantomJS
• Create new package.json
• Upgrade Grunt version from 0.3.* to 0.4.5
• Upgrade plugins
• Install uncss grunt plugin
• Modified Gruntfile.js
• Create a new task – “prod”

6. New task “prod”
• Prod stand for production
• This task will (bolded item will be explained in the next slide):
1. Clean all generated files by uncss
2. Created global array for SiteMap
3. Do the removal of the unused CSS based on SiteMap
4. Generated uncss.css
5. Compile and minified the ignore.less
6. Generated ignore.min.css
7. Combine the ignore.min.css & uncss.css
8. Minified the combined file
9. Generated all.min.un.css

7. SiteMap
• SiteMap is a list of page urls
SITE_MAP = [
'http://release.new.btgs.dev/',
'http://release.new.btgs.dev/#network',
'http://release.new.btgs.dev/#incidents',
'http://release.new.btgs.dev/#orders'
];
• PhantomJS will load the page using urls in the SiteMap, executed the
JavaScript, extracted the used stylesheets in resulting HTML
• The stylesheets are concatenated & the rules are parsed by css-parse
• Document.querySelector filters out selectors that are not found in
HTML document.

8. ignore.less
• Styles added by user interaction with the page ( hover, click ) are not
detectable by uncss yet ( they are working on it ).
• All the styles that are added by user interaction added in the
ignore.less

9. Output
• Original stylesheet size (minified) – 445KB
• Uncss version stylesheet size – 206KB
• Uncss version stylesheet size (minified) – 170KB

10. Demo

11. Resources & Links
• Uncss By Danny Walsh
• https://github.com/giakki/uncss
• Grunt-uncss plugin by Addy Osmani
• https://github.com/addyosmani/grunt-uncss
• PhantomJS by Aritya Hidayat
• http://phantomjs.org