Unobtrusive CSS

OBJECT-ORIENTEDUNOBTRUSIVE CSS

1Saturday, July 17, 2010

OBJECT-ORIENTEDUNOBTRUSIVE CSS


JOHN HWANGCEO @ MUTUALLY HUMAN


MUTUALLY HUMAN is an expert custom

software strategy & design consultancy

specializing in mobile & web-based

products & services.


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


RAILS 3.1Preprocessors for JavaScript and CSS


UNOBTRUSIVE CSS


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


WHAT IS UNOBTRUSIVE CSS?

• True separation of presentation and content

•No presentational classes in your HTML


THIS IS PRETTY CLEAN, BUT...


WHY BUILD UNOBTRUSIVE STYLESHEETS?

• Implementation is faster

• Changing design is faster

•More flexibility for theming and alternate stylesheets

• Redesigns made easier

• Better SEO


UNOBTRUSIVE CSS IS HARD


WHAT MAKES UNOBTRUSIVE HARD?

The issues with current CSS techniques


REPETITIVE SELECTORS Not DRY


CSS LACKS ABSTRACTIONClasses are not for style reuse


DIFFICULT TO CONTROL LAYOUT

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

•Must manually calculate widths and dimensions

• Internet Explorer


EFFICIENCY/ORGANIZATIONAL ISSUES

• IE imposes a maximum limit of 31 individual stylesheets


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


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


CSS FRAMEWORKS GAINED SOME TRACTION

• Promoted Grid Layout

• Best Practices

• Sensible Defaults

• Reset CSS

• Typography


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


HISTORY LESSONEvolution of Programming Languages


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


EVOLUTION OF CSS DEVELOPMENT

• CSS

• CSS Frameworks

• Semantic/Meta Frameworks

• Compiles down to CSS


SEMANTIC/META FRAMEWORKS


WHAT ARE CSS META FRAMEWORKS?

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


SASS"Syntactically Awesome Style Sheets"


WHAT IS SASS?

•Nested Rules

• Variables

•Mixins

• Compiles & Outputs CSS

• Fully CSS3-compatible (SCSS Syntax)


CSS3 COMPATIBLE


VARIABLES


NESTING


MIXIN


SELECTOR INHERITANCE


HOW DOES SASS MAKE UNOBTRUSIVE CSS EASY?

Case Study


STAGE 1


BETTER YET...


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


NAMESPACE LEGACY CSS50+ legacy css files


NESTED RULES FTW!CSS to SASS converter script FTW!


ELIMINATED ALL PRESENTATIONAL CLASSES


NESTED RULES MAKES CSS MORE CONCISE


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


OTHER BENEFITS OF COMPILATION

• Environment-dependent output formats

• Partials & imports

• Silent comments

• SassScript (Turing Complete)


PROVOCATIVE STATEMENT #1HAML feels like an unnecessary abstraction


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


PROVOCATIVE STATEMENT #2HTML/CSS is Your Problem


PROVOCATIVE STATEMENT #3 You probably don’t know CSS


ERIC MEYER


Q & A


Unobtrusive CSS

Technology

Transcript of Unobtrusive CSS