Crafting Scalable Stylesheets

A discussion of some ways we can use Sass and Compass to help us create scalable and maintainable stylesheets.

A PDF with slide notes can be found here: http://bit.ly/NJps8S

Transcript

1. CRAFTING SCALABLE STYLESHEETS Mike Fowler @michaelrfowler VT CodeCamp 2012
3. www.sass-lang.org
4. www.compass-style.com
5. WE WANT MAINTAINABILITY AND SCALABILITY
6. WE WANT NEED MAINTAINABILITY AND SCALABILITY
7. CSS IS A PUSHOVER
8. FILE STRUCTURE •Logical grouping •Modular architecture •Inline documentation
9. SEMANTICS
10. SEMANTICS CONTENT-DEPENDENT CONTENT-INDEPENDENT
13. OBJECT-ORIENTED CSS
19. @EXTEND FOR GREAT GOOD
25. CENTRALIZE YOUR APPLICATION SETTINGS
27. VARIABLES SIMPLIFY COMMON STYLESHEET UPDATES
31. VARIABLE SEMANTICS
32. “SMART” VARIABLES
36. • Frequently changed • Time-consuming to maintain • -webkit-f*#k: this; BROWSER PREFIXES
39. READABLE MEDIA QUERIES
46. MIXINS HELP TO CONTEXTUALIZE COMPLEX CODE
49. MEET http://susy.oddbird.net/
50. MEET http://susy.oddbird.net/
53. STYLE GUIDES
54. https://github.com/styleguide/css/1.0
55. https://github.com/styleguide/css/1.0
56. http://warpspire.com/kss/
57. http://jacobrask.github.com/styledocco/
58. KEEP DOCUMENTATION USEFUL AND UPDATED
59. GET STARTED NOW
60. http://livereload.com/
61. http://incident57.com/codekit/
62. http://mhs.github.com/scout-app/
63. PREPROCESSORS ENCOURAGE RETHINKING
64. RETHINKING ENCOURAGES NEW TECHNIQUES
65. NEW TECHNIQUES PROGRESS OUR CRAFT
66. THANK YOU Tweet: @michaelrfowler Blog: mikefowler.me Mail: mike@mikefowler.me https://speakerdeck.com/u/mikefowler/