SlideShare a Scribd company logo
1 of 68
WHAT IS OBJECT-ORIENTED
         CSS?
     A framework? A tool? A philosophy?
MORE LIKE AN EVOLUTION
  OF THE LANGUAGE
      it makes CSS more powerful
HOW IS IT DIFFERENT?


          ul{...}
       ul li{...}
     ul li a{...}
HOW IS IT DIFFERENT?


                        ul{...}
                     ul li{...}
                   ul li a{...}



Until now, we focused all our effort here
HOW IS IT DIFFERENT?


                   ul{...}
                ul li{...}
              ul li a{...}



But, the architecture lives here
“JAVASCRIPT DOESN’T SUCK
  You’re just doing it wrong.” -- Doug Crockford
“JAVASCRIPT DOESN’T SUCK
  You’re just doing it wrong.” -- Doug Crockford
CSS
“JAVASCRIPT DOESN’T SUCK
  You’re just doing it wrong.” -- Doug Crockford
CSS CIRCA 2005
    total spaghetti
CSS CIRCA 2008
    a little better
RATHER THAN MAKING
 OUR CODE PLAY NICE
      We built big fences
BUT FOR PERFORMANCE?
SITES GET SLOW
As file size and HTTP requests are not optimized
CSS CIRCA 2009
OBJECT ORIENTED CSS




         best practices for performance,
        scalability, and most importantly,
                     easy to use.
1. Create objects rather than pages or modules
2. Set good global defaults on content objects
3. Abstract reusable elements
4. Separate structure and skin (into two classes)
5. Separate container and content (open editable
   zones)
6. Tame the cascade
7. Use multiple classes to simulate OO
CREATE OBJECTS
 rather than pages or modules
SET GOOD GLOBAL
    DEFAULTS?
  for standard content objects
ABSTRACT REUSABLE
    ELEMENTS?
to allow maximum scalability, and less code
Contour blocks       Background blocks       Content Objects -
                                         headings, paragraphs, lists, headers,
                                               footers, buttons, etc.


                                             Capital of the Canterbury region and the largest city
                                             on the South Island (population just over 300,000)
                                             exudes a palpable air of gentility and a connectedness
                                             with the mother country.
                                             Read more...




                 X                       X
TAME THE CASCADE
Apply classes to the object we wish to extend, rather than
           random parent nodes. Predictability!
TAMING THE CASCADE


❖   Within any one object use the cascade fully
❖   All sub-nodes of an object should be prefaced with the object
    class name. For example: .mymodule .inner{...}
❖   Avoid the cascade as much as possible between objects
SEPARATE CONTAINER
   AND CONTENT
  define the boundaries of each object
Media
           Subheading
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
           aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
           aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
           cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




 image
or flash   OPEN EDITABLE ZONE
image
or flash   OPEN EDITABLE ZONE
USE MULTIPLE CLASSES?
      to simulate inheritance
Media
                     Subheading
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                     aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                     aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Media Extended
Subheading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




                                                       MEDIA
                                   Extending objects, a simple
                                           example.
<!-- media -->
<div class=quot;media mediaExtquot;>
  <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; />

 <div class=quot;bodyquot;>

 
 ...

 </div>
</div>
SEPARATE STRUCTURE
    FROM SKIN
     two separate classes
mod
                                   block
                                      inner
                                              hd



  STRUCTURE
Solves browser bugs, positions                bd
  presentational elems, and
generally does the heavy lifting
            of CSS.
                                              ft
mod
                                   block
                                      inner
                                              hd



  STRUCTURE
Solves browser bugs, positions                bd
  presentational elems, and
generally does the heavy lifting
            of CSS.
                                              ft
mod complex
 mod complex
mod pop
SKIN
      Makes it pretty.

 The goal is very predictable
skins, complexity is absorbed
 by the structure object and
    shared across the site.
/* ----- simple (extends mod) ----- */
.simple .inner {
   border:1px solid gray;
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
}
.simple b{
  *background-image:url(skin/mod/corners.png);
}
WHAT BELONGS IN THE
           SKIN?

Every value in the skin should be predictable, something that
can easily be calculated or measured.

Colors

Borders

Images
WHAT NOT TO DO!
inappropriate dependence on the cascade is not object
                     oriented.
LOCATION DEPENDENT
       STYLES
        avoid!
FUNCTION AREA()
FUNCTION AREA()
FUNCTION AREA()
EVERY NOW AND THEN...
RETURNED DIAMETER
BROKEN.
IN CSS WE DO THIS
   ALL THE TIME
BROKEN.
A   Heading should not become a          Heading

          in another part of the page.
AVOID
                  CODE EXAMPLE
             #weatherModule h3{color:red;}
             #tabs h3{color:blue}


❖   Global color undefined for h3, so it will be
    ‣   unstyled in new modules,
    ‣   developers forced to write more CSS for the same style
AVOID
                  CODE EXAMPLE
             h3{color:black;}
             #weatherModule h3{color:red;}
             #tabs h3{color:blue}
❖   Global color defined (better!)
❖   Weather and tabs override default h3
    ‣   three styles for h3 cannot co-exist in the same module
    ‣   default style cannot be used in weather and tabs without costly
        overrides
❖   Weather and tabs h3 can never be used outside of those
    modules
CONSISTENCY
    Writing more rules to
overwrite the crazy rules from
           before.

 e.g. Heading should behave
 predictably in any module.
TRY THIS INSTEAD
                        h1,    .h1{...}
                        h2,    .h2{...}
                        h3,    .h3{...}
                        h4,    .h4{...}
                        h5,    .h5{...}
                        h6,    .h6{...}

❖   Global values defined
❖   Semantics respected (while allowing visual flexibility)
NEED MORE THAN 6
   HEADINGS?
 Really? Any duplicates? Any too similar?
STILL NEED MORE
                HEADINGS?
           .category{...}
           .section{...}
           .product{...}
           .prediction{...}

❖   Extend the heading object via a class on the object itself
❖   Avoid using the cascade to place classes on parent objects
CALCULATING
COMPLEXITY IN CSS
  All solutions are not created equal
O(n)
Natural to you, but not to designers.
FRONT END ARCHITECTURE
   NEEDS TO BE RIGHT
 Even best practices, like CSS sprites, can have unintended
                        consequences.
3 METRICS


1. HTTP requests

2. Size of images

3. Size of the CSS
OUTCOMES
If the theory is right, it should yield better results.
TEMPLATE


• 807   bytes

• 13   lines of code

• easily
      extended to custom
 page and column width
GRIDS
•   574 bytes

•   14 lines of code

•   Percentage widths adapt to
    different page sizes

•   Includes halfs, thirds, fourths, and
    fifths

•   No gutters

•   Infinite nesting and stacking
MODULE

• 1.3K   (structure)

• 22   lines of code

• Width    and height agnostic

• Three   structures

• 264 different combos of
 skins
JS COMMUNITY
 How to remain JS lib agnostic?
      DHTML objects?
   Easily adding behaviors?
     Trigger parameters?
FLICKR PHOTO CREDITS
❖   “spaghetti con salsa de tomate y carne + albahaca” by pablovenegas
❖   “Jenga” by j3ku (3 photos, same title)
❖   “Sandbox Fun” by engelsrud
❖   “Golden Gate from Alcatraz” by Tolka Rover
❖   “Treasure Island / The Island / L'île Perdu / La Isla Maravillosa - Version II” by Aaron Escobar
❖   “Razor Wire (01)” by Amy
❖   “At the landfill” by digitalsadhu
❖   “Happy Day” by Daniel Gebhart
❖   “Finding Time to Laugh” by Leepack
❖   “Very Happy Baby” by Yogi
LET’S KEEP TALKING


❖   “Stubbornella” on the web. Twitter, doppler, everywhere...
❖   http://stubbornella.org
❖   nicole@stubbornella.org

More Related Content

What's hot

블록체인(Block Chain)이란? - 블록체인의 구성요소, 작동원리, 메커니즘의 이해
블록체인(Block Chain)이란? - 블록체인의 구성요소, 작동원리, 메커니즘의 이해블록체인(Block Chain)이란? - 블록체인의 구성요소, 작동원리, 메커니즘의 이해
블록체인(Block Chain)이란? - 블록체인의 구성요소, 작동원리, 메커니즘의 이해용진 최
 
Bitcoin 101
Bitcoin 101Bitcoin 101
Bitcoin 101InnoTech
 
문석진, 프로젝트DH의 절차적 애니메이션 시스템 Ⅱ, NDC2018
문석진, 프로젝트DH의 절차적 애니메이션 시스템 Ⅱ, NDC2018문석진, 프로젝트DH의 절차적 애니메이션 시스템 Ⅱ, NDC2018
문석진, 프로젝트DH의 절차적 애니메이션 시스템 Ⅱ, NDC2018devCAT Studio, NEXON
 
近ごろサイボウズで流行ってる「敷居が低いLT」の話
近ごろサイボウズで流行ってる「敷居が低いLT」の話近ごろサイボウズで流行ってる「敷居が低いLT」の話
近ごろサイボウズで流行ってる「敷居が低いLT」の話Ko Kazaana
 
그럴듯한 랜덤 생성 컨텐츠 만들기
그럴듯한 랜덤 생성 컨텐츠 만들기그럴듯한 랜덤 생성 컨텐츠 만들기
그럴듯한 랜덤 생성 컨텐츠 만들기Yongha Kim
 
WebGL Performance Tuning Tips
WebGL Performance Tuning TipsWebGL Performance Tuning Tips
WebGL Performance Tuning TipsYukio Andoh
 
[Unite2015 박민근] 유니티 최적화 테크닉 총정리
[Unite2015 박민근] 유니티 최적화 테크닉 총정리[Unite2015 박민근] 유니티 최적화 테크닉 총정리
[Unite2015 박민근] 유니티 최적화 테크닉 총정리MinGeun Park
 
충돌 알고리즘(collision detection algorithms)
충돌 알고리즘(collision detection algorithms)충돌 알고리즘(collision detection algorithms)
충돌 알고리즘(collision detection algorithms)ssuserbe87d6
 
ビットコインで使われている暗号の基礎を学ぶ
ビットコインで使われている暗号の基礎を学ぶビットコインで使われている暗号の基礎を学ぶ
ビットコインで使われている暗号の基礎を学ぶYuto Takei
 
Siggraph 2011: Occlusion culling in Alan Wake
Siggraph 2011: Occlusion culling in Alan WakeSiggraph 2011: Occlusion culling in Alan Wake
Siggraph 2011: Occlusion culling in Alan WakeUmbra
 
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술henjeon
 
코로나 이후, 반중정서는 과연 심화되었을까 - 강태영(언더스코어)
코로나 이후, 반중정서는 과연 심화되었을까 - 강태영(언더스코어)코로나 이후, 반중정서는 과연 심화되었을까 - 강태영(언더스코어)
코로나 이후, 반중정서는 과연 심화되었을까 - 강태영(언더스코어)Tae Young Kang
 
An Overview on Bitcoin
An Overview  on Bitcoin         An Overview  on Bitcoin
An Overview on Bitcoin Touroxy
 
加密勒索時代下的資料保存之戰 [2020/11/03] @InfoSec Taiwan 2020
加密勒索時代下的資料保存之戰 [2020/11/03] @InfoSec Taiwan 2020加密勒索時代下的資料保存之戰 [2020/11/03] @InfoSec Taiwan 2020
加密勒索時代下的資料保存之戰 [2020/11/03] @InfoSec Taiwan 2020Jason Cheng
 
객체지향 개념 (쫌 아는체 하기)
객체지향 개념 (쫌 아는체 하기)객체지향 개념 (쫌 아는체 하기)
객체지향 개념 (쫌 아는체 하기)Seung-June Lee
 
[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희changehee lee
 
Intrusive data structure 소개
Intrusive data structure 소개Intrusive data structure 소개
Intrusive data structure 소개종빈 오
 
OpenWRTとIPv6で高速インターネット!
OpenWRTとIPv6で高速インターネット!OpenWRTとIPv6で高速インターネット!
OpenWRTとIPv6で高速インターネット!KageShiron
 
モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)
モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)
モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)株式会社MonotaRO Tech Team
 

What's hot (20)

블록체인(Block Chain)이란? - 블록체인의 구성요소, 작동원리, 메커니즘의 이해
블록체인(Block Chain)이란? - 블록체인의 구성요소, 작동원리, 메커니즘의 이해블록체인(Block Chain)이란? - 블록체인의 구성요소, 작동원리, 메커니즘의 이해
블록체인(Block Chain)이란? - 블록체인의 구성요소, 작동원리, 메커니즘의 이해
 
Bitcoin 101
Bitcoin 101Bitcoin 101
Bitcoin 101
 
문석진, 프로젝트DH의 절차적 애니메이션 시스템 Ⅱ, NDC2018
문석진, 프로젝트DH의 절차적 애니메이션 시스템 Ⅱ, NDC2018문석진, 프로젝트DH의 절차적 애니메이션 시스템 Ⅱ, NDC2018
문석진, 프로젝트DH의 절차적 애니메이션 시스템 Ⅱ, NDC2018
 
近ごろサイボウズで流行ってる「敷居が低いLT」の話
近ごろサイボウズで流行ってる「敷居が低いLT」の話近ごろサイボウズで流行ってる「敷居が低いLT」の話
近ごろサイボウズで流行ってる「敷居が低いLT」の話
 
그럴듯한 랜덤 생성 컨텐츠 만들기
그럴듯한 랜덤 생성 컨텐츠 만들기그럴듯한 랜덤 생성 컨텐츠 만들기
그럴듯한 랜덤 생성 컨텐츠 만들기
 
WebGL Performance Tuning Tips
WebGL Performance Tuning TipsWebGL Performance Tuning Tips
WebGL Performance Tuning Tips
 
[Unite2015 박민근] 유니티 최적화 테크닉 총정리
[Unite2015 박민근] 유니티 최적화 테크닉 총정리[Unite2015 박민근] 유니티 최적화 테크닉 총정리
[Unite2015 박민근] 유니티 최적화 테크닉 총정리
 
충돌 알고리즘(collision detection algorithms)
충돌 알고리즘(collision detection algorithms)충돌 알고리즘(collision detection algorithms)
충돌 알고리즘(collision detection algorithms)
 
ビットコインで使われている暗号の基礎を学ぶ
ビットコインで使われている暗号の基礎を学ぶビットコインで使われている暗号の基礎を学ぶ
ビットコインで使われている暗号の基礎を学ぶ
 
Siggraph 2011: Occlusion culling in Alan Wake
Siggraph 2011: Occlusion culling in Alan WakeSiggraph 2011: Occlusion culling in Alan Wake
Siggraph 2011: Occlusion culling in Alan Wake
 
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술Ndc2010 전형규   마비노기2 캐릭터 렌더링 기술
Ndc2010 전형규 마비노기2 캐릭터 렌더링 기술
 
코로나 이후, 반중정서는 과연 심화되었을까 - 강태영(언더스코어)
코로나 이후, 반중정서는 과연 심화되었을까 - 강태영(언더스코어)코로나 이후, 반중정서는 과연 심화되었을까 - 강태영(언더스코어)
코로나 이후, 반중정서는 과연 심화되었을까 - 강태영(언더스코어)
 
An Overview on Bitcoin
An Overview  on Bitcoin         An Overview  on Bitcoin
An Overview on Bitcoin
 
eTaPR 설명
eTaPR 설명eTaPR 설명
eTaPR 설명
 
加密勒索時代下的資料保存之戰 [2020/11/03] @InfoSec Taiwan 2020
加密勒索時代下的資料保存之戰 [2020/11/03] @InfoSec Taiwan 2020加密勒索時代下的資料保存之戰 [2020/11/03] @InfoSec Taiwan 2020
加密勒索時代下的資料保存之戰 [2020/11/03] @InfoSec Taiwan 2020
 
객체지향 개념 (쫌 아는체 하기)
객체지향 개념 (쫌 아는체 하기)객체지향 개념 (쫌 아는체 하기)
객체지향 개념 (쫌 아는체 하기)
 
[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희[Kgc2012] deferred forward 이창희
[Kgc2012] deferred forward 이창희
 
Intrusive data structure 소개
Intrusive data structure 소개Intrusive data structure 소개
Intrusive data structure 소개
 
OpenWRTとIPv6で高速インターネット!
OpenWRTとIPv6で高速インターネット!OpenWRTとIPv6で高速インターネット!
OpenWRTとIPv6で高速インターネット!
 
モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)
モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)
モノタロウの1900万商品を検索する Elasticsearch構築運用事例(2022-10-26 第50回Elasticsearch 勉強会発表資料)
 

Similar to What is Object Oriented CSS?

The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
 
Building Better Responsive Websites
Building Better Responsive WebsitesBuilding Better Responsive Websites
Building Better Responsive WebsitesHolger Bartel
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best PracticesHolger Bartel
 
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application FrameworkFamo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application FrameworkHina Chen
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)webdagene
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsNetguru
 
Rapid web development, the right way.
Rapid web development, the right way.Rapid web development, the right way.
Rapid web development, the right way.nubela
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers PerspectiveMediacurrent
 
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Christian Lilley
 
He stopped using for/while loops, you won't believe what happened next!
He stopped using for/while loops, you won't believe what happened next!He stopped using for/while loops, you won't believe what happened next!
He stopped using for/while loops, you won't believe what happened next!François-Guillaume Ribreau
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Ryan Cross
 
Deterministic capacity planning for OpenStack as elastic cloud infrastructure
Deterministic capacity planning for OpenStack as elastic cloud infrastructureDeterministic capacity planning for OpenStack as elastic cloud infrastructure
Deterministic capacity planning for OpenStack as elastic cloud infrastructureSean Cohen
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Developmentmwrather
 
WEBASSEMBLY - What's the right thing to write? -
WEBASSEMBLY - What's the right thing to write? -WEBASSEMBLY - What's the right thing to write? -
WEBASSEMBLY - What's the right thing to write? -Shin Yoshida
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoBrad Frost
 

Similar to What is Object Oriented CSS? (20)

The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective,  Ajax ...
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
 
Building Better Responsive Websites
Building Better Responsive WebsitesBuilding Better Responsive Websites
Building Better Responsive Websites
 
Juggling
JugglingJuggling
Juggling
 
Juggling
JugglingJuggling
Juggling
 
Front End Best Practices
Front End Best PracticesFront End Best Practices
Front End Best Practices
 
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application FrameworkFamo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application Framework
 
Reveal
RevealReveal
Reveal
 
Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)Brad frost: Atomic design (Webdagene 2014)
Brad frost: Atomic design (Webdagene 2014)
 
OOScss Architecture For Rails Apps
OOScss Architecture For Rails AppsOOScss Architecture For Rails Apps
OOScss Architecture For Rails Apps
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
Rapid web development, the right way.
Rapid web development, the right way.Rapid web development, the right way.
Rapid web development, the right way.
 
Display Suite: A Themers Perspective
Display Suite: A Themers PerspectiveDisplay Suite: A Themers Perspective
Display Suite: A Themers Perspective
 
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
Scalable CSS You and Your Back-End Coders Can Love - @CSSConf Asia 2014
 
He stopped using for/while loops, you won't believe what happened next!
He stopped using for/while loops, you won't believe what happened next!He stopped using for/while loops, you won't believe what happened next!
He stopped using for/while loops, you won't believe what happened next!
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)
 
Deterministic capacity planning for OpenStack as elastic cloud infrastructure
Deterministic capacity planning for OpenStack as elastic cloud infrastructureDeterministic capacity planning for OpenStack as elastic cloud infrastructure
Deterministic capacity planning for OpenStack as elastic cloud infrastructure
 
Modern Front-End Development
Modern Front-End DevelopmentModern Front-End Development
Modern Front-End Development
 
WEBASSEMBLY - What's the right thing to write? -
WEBASSEMBLY - What's the right thing to write? -WEBASSEMBLY - What's the right thing to write? -
WEBASSEMBLY - What's the right thing to write? -
 
Atomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San DiegoAtomic Design - An Event Apart San Diego
Atomic Design - An Event Apart San Diego
 

More from Nicole Sullivan

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS Nicole Sullivan
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceNicole Sullivan
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSSNicole Sullivan
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?Nicole Sullivan
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 

More from Nicole Sullivan (14)

Building the Media Block in ReactJS
Building the Media Block in ReactJS Building the Media Block in ReactJS
Building the Media Block in ReactJS
 
Why are you here?
Why are you here?Why are you here?
Why are you here?
 
Creating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve PerformanceCreating Living Style Guides to Improve Performance
Creating Living Style Guides to Improve Performance
 
Don't feed the trolls
Don't feed the trollsDon't feed the trolls
Don't feed the trolls
 
CSS Power Tools
CSS Power ToolsCSS Power Tools
CSS Power Tools
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
 
CSS Wish List @JSConf
CSS Wish List @JSConfCSS Wish List @JSConf
CSS Wish List @JSConf
 
Taming CSS Selectors
Taming CSS SelectorsTaming CSS Selectors
Taming CSS Selectors
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Pourquoi la performance?
Pourquoi la performance?Pourquoi la performance?
Pourquoi la performance?
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 

Recently uploaded

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch TuesdayIvanti
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxFIDO Alliance
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityVictorSzoltysek
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfdanishmna97
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfAnubhavMangla3
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTopCSSGallery
 

Recently uploaded (20)

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
ChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps ProductivityChatGPT and Beyond - Elevating DevOps Productivity
ChatGPT and Beyond - Elevating DevOps Productivity
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 

What is Object Oriented CSS?

  • 1. WHAT IS OBJECT-ORIENTED CSS? A framework? A tool? A philosophy?
  • 2. MORE LIKE AN EVOLUTION OF THE LANGUAGE it makes CSS more powerful
  • 3. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...}
  • 4. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} Until now, we focused all our effort here
  • 5. HOW IS IT DIFFERENT? ul{...} ul li{...} ul li a{...} But, the architecture lives here
  • 6. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • 7. “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • 8. CSS “JAVASCRIPT DOESN’T SUCK You’re just doing it wrong.” -- Doug Crockford
  • 9. CSS CIRCA 2005 total spaghetti
  • 10.
  • 11. CSS CIRCA 2008 a little better
  • 12. RATHER THAN MAKING OUR CODE PLAY NICE We built big fences
  • 14.
  • 15. SITES GET SLOW As file size and HTTP requests are not optimized
  • 17. OBJECT ORIENTED CSS best practices for performance, scalability, and most importantly, easy to use.
  • 18. 1. Create objects rather than pages or modules 2. Set good global defaults on content objects 3. Abstract reusable elements 4. Separate structure and skin (into two classes) 5. Separate container and content (open editable zones) 6. Tame the cascade 7. Use multiple classes to simulate OO
  • 19. CREATE OBJECTS rather than pages or modules
  • 20. SET GOOD GLOBAL DEFAULTS? for standard content objects
  • 21. ABSTRACT REUSABLE ELEMENTS? to allow maximum scalability, and less code
  • 22. Contour blocks Background blocks Content Objects - headings, paragraphs, lists, headers, footers, buttons, etc. Capital of the Canterbury region and the largest city on the South Island (population just over 300,000) exudes a palpable air of gentility and a connectedness with the mother country. Read more... X X
  • 23. TAME THE CASCADE Apply classes to the object we wish to extend, rather than random parent nodes. Predictability!
  • 24. TAMING THE CASCADE ❖ Within any one object use the cascade fully ❖ All sub-nodes of an object should be prefaced with the object class name. For example: .mymodule .inner{...} ❖ Avoid the cascade as much as possible between objects
  • 25. SEPARATE CONTAINER AND CONTENT define the boundaries of each object
  • 26. Media Subheading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. image or flash OPEN EDITABLE ZONE
  • 27. image or flash OPEN EDITABLE ZONE
  • 28. USE MULTIPLE CLASSES? to simulate inheritance
  • 29. Media Subheading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Media Extended Subheading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. MEDIA Extending objects, a simple example.
  • 30. <!-- media --> <div class=quot;media mediaExtquot;> <img class=quot;fixedMediaquot; src=quot;myImg.pngquot; /> <div class=quot;bodyquot;> ... </div> </div>
  • 31. SEPARATE STRUCTURE FROM SKIN two separate classes
  • 32. mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
  • 33. mod block inner hd STRUCTURE Solves browser bugs, positions bd presentational elems, and generally does the heavy lifting of CSS. ft
  • 34. mod complex mod complex
  • 36. SKIN Makes it pretty. The goal is very predictable skins, complexity is absorbed by the structure object and shared across the site.
  • 37. /* ----- simple (extends mod) ----- */ .simple .inner { border:1px solid gray; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; } .simple b{ *background-image:url(skin/mod/corners.png); }
  • 38. WHAT BELONGS IN THE SKIN? Every value in the skin should be predictable, something that can easily be calculated or measured. Colors Borders Images
  • 39.
  • 40.
  • 41. WHAT NOT TO DO! inappropriate dependence on the cascade is not object oriented.
  • 42. LOCATION DEPENDENT STYLES avoid!
  • 46. EVERY NOW AND THEN...
  • 49. IN CSS WE DO THIS ALL THE TIME
  • 51. A Heading should not become a Heading in another part of the page.
  • 52. AVOID CODE EXAMPLE #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color undefined for h3, so it will be ‣ unstyled in new modules, ‣ developers forced to write more CSS for the same style
  • 53. AVOID CODE EXAMPLE h3{color:black;} #weatherModule h3{color:red;} #tabs h3{color:blue} ❖ Global color defined (better!) ❖ Weather and tabs override default h3 ‣ three styles for h3 cannot co-exist in the same module ‣ default style cannot be used in weather and tabs without costly overrides ❖ Weather and tabs h3 can never be used outside of those modules
  • 54. CONSISTENCY Writing more rules to overwrite the crazy rules from before. e.g. Heading should behave predictably in any module.
  • 55. TRY THIS INSTEAD h1, .h1{...} h2, .h2{...} h3, .h3{...} h4, .h4{...} h5, .h5{...} h6, .h6{...} ❖ Global values defined ❖ Semantics respected (while allowing visual flexibility)
  • 56. NEED MORE THAN 6 HEADINGS? Really? Any duplicates? Any too similar?
  • 57. STILL NEED MORE HEADINGS? .category{...} .section{...} .product{...} .prediction{...} ❖ Extend the heading object via a class on the object itself ❖ Avoid using the cascade to place classes on parent objects
  • 58. CALCULATING COMPLEXITY IN CSS All solutions are not created equal
  • 59. O(n) Natural to you, but not to designers.
  • 60. FRONT END ARCHITECTURE NEEDS TO BE RIGHT Even best practices, like CSS sprites, can have unintended consequences.
  • 61. 3 METRICS 1. HTTP requests 2. Size of images 3. Size of the CSS
  • 62. OUTCOMES If the theory is right, it should yield better results.
  • 63. TEMPLATE • 807 bytes • 13 lines of code • easily extended to custom page and column width
  • 64. GRIDS • 574 bytes • 14 lines of code • Percentage widths adapt to different page sizes • Includes halfs, thirds, fourths, and fifths • No gutters • Infinite nesting and stacking
  • 65. MODULE • 1.3K (structure) • 22 lines of code • Width and height agnostic • Three structures • 264 different combos of skins
  • 66. JS COMMUNITY How to remain JS lib agnostic? DHTML objects? Easily adding behaviors? Trigger parameters?
  • 67. FLICKR PHOTO CREDITS ❖ “spaghetti con salsa de tomate y carne + albahaca” by pablovenegas ❖ “Jenga” by j3ku (3 photos, same title) ❖ “Sandbox Fun” by engelsrud ❖ “Golden Gate from Alcatraz” by Tolka Rover ❖ “Treasure Island / The Island / L'île Perdu / La Isla Maravillosa - Version II” by Aaron Escobar ❖ “Razor Wire (01)” by Amy ❖ “At the landfill” by digitalsadhu ❖ “Happy Day” by Daniel Gebhart ❖ “Finding Time to Laugh” by Leepack ❖ “Very Happy Baby” by Yogi
  • 68. LET’S KEEP TALKING ❖ “Stubbornella” on the web. Twitter, doppler, everywhere... ❖ http://stubbornella.org ❖ nicole@stubbornella.org

Editor's Notes

  1. After which he said that &#x201C;CSS is broken&#x201D; Very common to say that CSS is broken when it is misunderstood. &#x201C;Emerging frameworks are a sign that CSS is broken.&#x201D; Java developers -- Math class TRANSITION On the other hand, I honestly do believe we are doing it wrong.
  2. After which he said that &#x201C;CSS is broken&#x201D; Very common to say that CSS is broken when it is misunderstood. &#x201C;Emerging frameworks are a sign that CSS is broken.&#x201D; Java developers -- Math class TRANSITION On the other hand, I honestly do believe we are doing it wrong.
  3. Modular CSS is a great idea in theory, but in practice...
  4. Nothing is shared between modules, each reinvents the CSS wheel. Wastefully file sizes and http requests grow and...
  5. What is ... ?
  6. lists, headings, etc should all be global
  7. grids
  8. contours X backgrounds X content objects = complexity 1 X foo bar X 1 2 X 4 = 8 HTTP req 5 X 5 = 25 HTTP req
  9. Classes on object we wish to extend.
  10. media, media extended, wrap Open editable zone
  11. media, media extended, wrap Open editable zone
  12. media, media extended, wrap Open editable zone
  13. function created to return area that occasionally returns the diameter instead.
  14. There is a general belief in CSS development that there are many &#x2018;right&#x2019; ways. This isn&#x2019;t always true.
  15. Each time you analyze a solution, there are three main metrics that should be considered.