21. Reduce file size
GZIP
Number of css files
Minify
Reuse code
Smaller selectors
TW 2011 @hurrycane
Monday, February 21, 2011
22. Reduce file size
GZIP
Number of css files
Minify
Reuse code
Smaller selectors
TW 2011 @hurrycane
Monday, February 21, 2011
23. Reduce file size
Minification = remove unnecessary characters from code
without changing functionality
TW 2011 @hurrycane
Monday, February 21, 2011
24. Reduce file size
Minification is done using different tools.
YUI-Compressor
Minify
Closure Compiler (google)
TW 2011 @hurrycane
Monday, February 21, 2011
25. Reduce file size
YUI-Compressor is used for both JavaScript and CSS
Written in Java
Command line tool
yuicompressor ceva.css -o ceva.min.css
TW 2011 @hurrycane
Monday, February 21, 2011
26. YUI-Compressor
Demo
TW 2011 @hurrycane
Monday, February 21, 2011
27. Reduce file size
GZIP
Number of css files
Minify
Reuse code
Smaller selectors
TW 2011 @hurrycane
Monday, February 21, 2011
29. Paradigm shift
ul { ... }
ul li { ... }
ul li a { ... }
Until now, focus was here
TW 2011 @hurrycane
Monday, February 21, 2011
30. Paradigm shift
ul { ... }
ul li { ... }
ul li a { ... }
Arhitecture lives here
TW 2011 @hurrycane
Monday, February 21, 2011
31. Object oriented css
Objects rather than pages
Global defaults
Abstract reusable elements
Separate structure and skin
Use multiple classes to simulate OO
TW 2011 @hurrycane
Monday, February 21, 2011
