Post on 28-Jan-2015
description
transcript
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