unobtrusive css

OBJECT-ORIENTEDUNOBTRUSIVE CSS

1Saturday, July 17, 2010

OBJECT-ORIENTEDUNOBTRUSIVE CSS

2Saturday, July 17, 2010

JOHN HWANGCEO @ MUTUALLY HUMAN

3Saturday, July 17, 2010

MUTUALLY HUMAN is an expert custom

software strategy & design consultancy

specializing in mobile & web-based

products & services.

4Saturday, July 17, 2010

5Saturday, July 17, 2010

ERIC MEYER"Semantic Frameworks are a game-changer."

6Saturday, July 17, 2010

RAILS 3.1Preprocessors for JavaScript and CSS

7Saturday, July 17, 2010

8Saturday, July 17, 2010

UNOBTRUSIVE CSS

9Saturday, July 17, 2010

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

10Saturday, July 17, 2010

WHAT IS UNOBTRUSIVE CSS?

• True separation of presentation and content

•No presentational classes in your HTML

11Saturday, July 17, 2010

THIS IS PRETTY CLEAN, BUT...

12Saturday, July 17, 2010

WHY BUILD UNOBTRUSIVE STYLESHEETS?

• Implementation is faster

• Changing design is faster

•More flexibility for theming and alternate stylesheets

• Redesigns made easier

• Better SEO

13Saturday, July 17, 2010

UNOBTRUSIVE CSS IS HARD

14Saturday, July 17, 2010

WHAT MAKES UNOBTRUSIVE HARD?

The issues with current CSS techniques

15Saturday, July 17, 2010

REPETITIVE SELECTORS Not DRY

16Saturday, July 17, 2010

17Saturday, July 17, 2010

CSS LACKS ABSTRACTIONClasses are not for style reuse

18Saturday, July 17, 2010

DIFFICULT TO CONTROL LAYOUT

• Grid Layouts are great, but requires a lot of careful pre-planning

•Must manually calculate widths and dimensions

• Internet Explorer

19Saturday, July 17, 2010

EFFICIENCY/ORGANIZATIONAL ISSUES

• IE imposes a maximum limit of 31 individual stylesheets

20Saturday, July 17, 2010

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

21Saturday, July 17, 2010

CSS FRAMEWORKSBlueprint CSS, 960 Grid, YUI and many more...

22Saturday, July 17, 2010

CSS FRAMEWORKS GAINED SOME TRACTION

• Promoted Grid Layout

• Best Practices

• Sensible Defaults

• Reset CSS

• Typography

23Saturday, July 17, 2010

24Saturday, July 17, 2010

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

25Saturday, July 17, 2010

HISTORY LESSONEvolution of Programming Languages

26Saturday, July 17, 2010

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

27Saturday, July 17, 2010

EVOLUTION OF CSS DEVELOPMENT

• CSS

• CSS Frameworks

• Semantic/Meta Frameworks

• Compiles down to CSS

28Saturday, July 17, 2010

SEMANTIC/META FRAMEWORKS

29Saturday, July 17, 2010

WHAT ARE CSS META FRAMEWORKS?

CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax

30Saturday, July 17, 2010

SASS"Syntactically Awesome Style Sheets"

31Saturday, July 17, 2010

WHAT IS SASS?

•Nested Rules

• Variables

•Mixins

• Compiles & Outputs CSS

• Fully CSS3-compatible (SCSS Syntax)

32Saturday, July 17, 2010

CSS3 COMPATIBLE

33Saturday, July 17, 2010

VARIABLES

34Saturday, July 17, 2010

NESTING

35Saturday, July 17, 2010

MIXIN

36Saturday, July 17, 2010

SELECTOR INHERITANCE

37Saturday, July 17, 2010

HOW DOES SASS MAKE UNOBTRUSIVE CSS EASY?

Case Study

38Saturday, July 17, 2010

STAGE 1

39Saturday, July 17, 2010

40Saturday, July 17, 2010

BETTER YET...

41Saturday, July 17, 2010

42Saturday, July 17, 2010

STAGE 2Implement new shell to house legacy content and new content

43Saturday, July 17, 2010

NAMESPACE LEGACY CSS50+ legacy css files

44Saturday, July 17, 2010

NESTED RULES FTW!CSS to SASS converter script FTW!

45Saturday, July 17, 2010

46Saturday, July 17, 2010

ELIMINATED ALL PRESENTATIONAL CLASSES

47Saturday, July 17, 2010

48Saturday, July 17, 2010

NESTED RULES MAKES CSS MORE CONCISE

49Saturday, July 17, 2010

EFFICIENCY/ORGANIZATIONAL ISSUESImports are compiled down to 1 single CSS file

50Saturday, July 17, 2010

OTHER BENEFITS OF COMPILATION

• Environment-dependent output formats

• Partials & imports

• Silent comments

• SassScript (Turing Complete)

51Saturday, July 17, 2010

PROVOCATIVE STATEMENT #1HAML feels like an unnecessary abstraction

52Saturday, July 17, 2010

If you're product is 10 times better than your competitor, ship it now!

53Saturday, July 17, 2010

PROVOCATIVE STATEMENT #2HTML/CSS is Your Problem

54Saturday, July 17, 2010

PROVOCATIVE STATEMENT #3 You probably don’t know CSS

55Saturday, July 17, 2010

ERIC MEYER

56Saturday, July 17, 2010

Q & A

57Saturday, July 17, 2010