To quote Eric Meyer, "Semantic Frameworks are a game-changer." Meta CSS frameworks like SASS, lessCSS, and xCSS are revolutionizing the way we write and manage modern, semantic CSS. With features such as variables, mixins, nested rules and operations, these meta frameworks brings us closer to writing our CSS in an unobtrusive way. They incorporate CSS frameworks such as Blueprint, Grid960, and YUI and bring together the best of grid design, CSS reset techniques and browser hacks in an unobtrusive and semantic way. Ultimately, these meta frameworks allow us to develop truly semantic websites that are not only maintainable and fun to develop. This talk with discuss CSS systems, meta frameworks, and best practices for writing unobtrusive semantic code.

1. OBJECT-ORIENTED
UNOBTRUSIVE CSS
Saturday, July 17, 2010 1

2. OBJECT-ORIENTED
UNOBTRUSIVE CSS
Saturday, July 17, 2010 2

3. JOHN HWANG
CEO @ MUTUALLY HUMAN
Saturday, July 17, 2010 3

4. MUTUALLY HUMAN is an expert custom
software strategy & design consultancy
specializing in mobile & web-based
products & services.
Saturday, July 17, 2010 4

5. Saturday, July 17, 2010 5

6. ERIC MEYER
"Semantic Frameworks are a game-changer."
Saturday, July 17, 2010 6

7. RAILS 3.1
Preprocessors for JavaScript and CSS
Saturday, July 17, 2010 7

8. Saturday, July 17, 2010 8

9. UNOBTRUSIVE CSS
Saturday, July 17, 2010 9

10. ASSUMPTIONS
• Write beautiful and valid markup
• Mostly Use Semantic Markup & Class/ID Names
• Agree that separate of content, presentation and behavior is a
Good Thing®
• Appreciate Unobtrusive JavaScript
• Aware of
Saturday, July 17, 2010 10

11. WHAT IS UNOBTRUSIVE CSS?
• True separation of presentation and content
• No presentational classes in your HTML
Saturday, July 17, 2010 11

12. THIS IS PRETTY CLEAN, BUT...
Saturday, July 17, 2010 12

13. WHY BUILD UNOBTRUSIVE
STYLESHEETS?
• Implementation is faster
• Changing design is faster
• More flexibility for theming and alternate stylesheets
• Redesigns made easier
• Better SEO
Saturday, July 17, 2010 13

14. UNOBTRUSIVE CSS IS HARD
Saturday, July 17, 2010 14

15. WHAT MAKES UNOBTRUSIVE
HARD?
The issues with current CSS techniques
Saturday, July 17, 2010 15

16. REPETITIVE SELECTORS
Not DRY
Saturday, July 17, 2010 16

17. Saturday, July 17, 2010 17

18. CSS LACKS ABSTRACTION
Classes are not for style reuse
Saturday, July 17, 2010 18

19. DIFFICULT TO CONTROL
LAYOUT
• Grid Layouts are great, but requires a lot of careful pre-
planning
• Must manually calculate widths and dimensions
• Internet Explorer
Saturday, July 17, 2010 19

20. EFFICIENCY/
ORGANIZATIONAL ISSUES
• IE imposes a maximum limit of 31 individual stylesheets
Saturday, July 17, 2010 20

21. WHAT DOES THIS ALL MEAN?
• Code Reuse is almost non-existent
• Code Organization is non-existent
• File size just keep getting bigger
• Very difficult to create a sensible easy to understand CSS
system
• Difficult to maintain or change
Saturday, July 17, 2010 21

22. CSS FRAMEWORKS
Blueprint CSS, 960 Grid, YUI and many more...
Saturday, July 17, 2010 22

23. CSS FRAMEWORKS
GAINED SOME TRACTION
• Promoted Grid Layout
• Best Practices
• Sensible Defaults
• Reset CSS
• Typography
Saturday, July 17, 2010 23

24. Saturday, July 17, 2010 24

25. PROBLEM WITH CSS
FRAMEWORKS
• Nothing more than a collection of CSS snippets
• Tight coupling of presentation and content
• Almost as bad as using <table> for layout
Saturday, July 17, 2010 25

26. HISTORY LESSON
Evolution of Programming Languages
Saturday, July 17, 2010 26

27. EVOLUTION OF
PROGRAMMING LANGUAGES
• Punchcards/Assembly Language
• Procedural Code (C/Cobol/Fortran)
• Object Oriented Code (Java/C#/C++/Ruby)
• The All Compile Down to Assembly Language
Saturday, July 17, 2010 27

28. EVOLUTION OF CSS
DEVELOPMENT
• CSS
• CSS Frameworks
• Semantic/Meta Frameworks
• Compiles down to CSS
Saturday, July 17, 2010 28

29. SEMANTIC/META
FRAMEWORKS
Saturday, July 17, 2010 29

30. WHAT ARE CSS META
FRAMEWORKS?
CSS, plus nested rules, variables, mixins, and more, all in a
concise, readable syntax
Saturday, July 17, 2010 30

31. SASS
"Syntactically Awesome Style Sheets"
Saturday, July 17, 2010 31

32. WHAT IS SASS?
• Nested Rules
• Variables
• Mixins
• Compiles & Outputs CSS
• Fully CSS3-compatible (SCSS Syntax)
Saturday, July 17, 2010 32

33. CSS3 COMPATIBLE
Saturday, July 17, 2010 33

34. VARIABLES
Saturday, July 17, 2010 34

35. NESTING
Saturday, July 17, 2010 35

36. MIXIN
Saturday, July 17, 2010 36

37. SELECTOR INHERITANCE
Saturday, July 17, 2010 37

38. HOW DOES SASS MAKE
UNOBTRUSIVE CSS EASY?
Case Study
Saturday, July 17, 2010 38

39. STAGE 1
Saturday, July 17, 2010 39

40. Saturday, July 17, 2010 40

41. BETTER YET...
Saturday, July 17, 2010 41

42. Saturday, July 17, 2010 42

43. STAGE 2
Implement new shell to house legacy content and new content
Saturday, July 17, 2010 43

44. NAMESPACE LEGACY CSS
50+ legacy css files
Saturday, July 17, 2010 44

45. NESTED RULES FTW!
CSS to SASS converter script FTW!
Saturday, July 17, 2010 45

46. Saturday, July 17, 2010 46

47. ELIMINATED ALL
PRESENTATIONAL CLASSES
Saturday, July 17, 2010 47

48. Saturday, July 17, 2010 48

49. NESTED RULES MAKES CSS
MORE CONCISE
Saturday, July 17, 2010 49

50. EFFICIENCY/ORGANIZATIONAL ISSUES
Imports are compiled down to 1 single CSS file
Saturday, July 17, 2010 50

51. OTHER BENEFITS OF
COMPILATION
• Environment-dependent output formats
• Partials & imports
• Silent comments
• SassScript (Turing Complete)
Saturday, July 17, 2010 51

52. PROVOCATIVE STATEMENT #1
HAML feels like an unnecessary abstraction
Saturday, July 17, 2010 52

53. If you're product is 10 times better
than your competitor, ship it now!
Saturday, July 17, 2010 53

54. PROVOCATIVE STATEMENT #2
HTML/CSS is Your Problem
Saturday, July 17, 2010 54

55. PROVOCATIVE STATEMENT #3
You probably don’t know CSS
Saturday, July 17, 2010 55

56. ERIC MEYER
Saturday, July 17, 2010 56

57. Q&A
Saturday, July 17, 2010 57