css architecture with oocss, smacss, bem

Download CSS Architecture with OOCSS, SMACSS, BEM

Post on 11-Aug-2014

4.567 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

Slide about Modern CSS Architecture. with OOCSS, SMACSS, BEM and Preprocessors. If you want to download PDF but don't want to login SlideShare, go to Speacker Deck on which is the same downloadable PDF : https://speakerdeck.com/katsunoritanaka/css-architecture-with-oocss-smacss-bem

TRANSCRIPT

  • CSS Architecture jsCafe 2014-03-09 KatsunoriTanaka with OOCSS,SMACSS,BEM
  • OUTLINE 1. CSS Architecture 2. CSS Methodology 3. CSS Preprocessor 4. Semantics 5. Summary
  • 1. CSS Architecture
  • What? CSS Architecture
  • https://ja.wikipedia.org/wiki/ -wikipedia
  • Why? CSS Architecture
  • CSS is simple... Its simple to understand. But CSS is not simple to use or maintain. CSS http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/ -Chris Eppstein
  • We have been doing it all wrong.... Our (CSS) best practices are killing us CSS http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ -Nicole Sullivan
  • Three Best Practice Myths Dont add any extra elements Dont add classes Use descendent selectors exclusively http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
  • CODE ISTOO FRAGILE. http://www.stubbornella.org/content/2009/02/12/css-doesnt-suck-youre-just-doing-it-wrong/ -Nicole Sullivan CSS
  • CSS Architecture http://philipwalton.com/articles/css-architecture/
  • The Goals of Good CSS Architecture Predictable Reusable Maintainable Scalable http://philipwalton.com/articles/css-architecture/
  • CSS isn't just visual design. Don't throw out programming best practices just because you're writing CSS. Concepts like OOP, DRY, the open/closed principle, separation of concerns, etc. still apply to CSS. DRY/ CSS http://philipwalton.com/articles/css-architecture/
  • 2. CSS Methodology
  • CSS Methodology OOCSS SMACSS BEM
  • Object Oriented CSS
  • OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki
  • Two Main Principles Separate Structure and Skin Separete Container and Content
  • abstract the structure of the block from skin which is being applied. Class can be extended by adding additional classes to the block element. Separate Structure and Skin
  • break the dependency between the container module and the content objects it contains. Separate Container and Content
  • EXMAPLE MEDIA OBJECT
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.

  • .media-shadow { box-shadow: 0 1px 5px rgba(0,0,0,0.75); } .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; }
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    media-shadow
  • Sub Class (descendent) Sub Class (descendent)

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Base Class Sub Class (modier)
  • Three Best Practice Myths Dont add any extra elements Dont add classes Use descendent selectors exclusively http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
  • Add classes Dont use descendent selectors Two Practices OOCSS
  • Scalable & Modular Architecture for CSS SMACSS
  • SMACSS Jonathan Snook http://smacss.com
  • Three Main Principles Categorizing CSS Rules Naming Rules Minimizing the Depth of Applicability
  • Five Types of Categories 1. Base 2. Layout 3. Module 4. State 5. Theme
  • Base Rules http://yuilibrary.com/yui/docs/cssreset/ http://necolas.github.io/normalize.css/ ID CSS Reset Normalize CSS
  • Layout Rules ( Major Components) ID l-layout- .l-header .l-sidebar .l-content .l-footer http://smacss.com/book/type-layout
  • Module Rules ( Minor Components) reusable .media .media-image .media-image-hoge http://smacss.com/book/type-module
  • Sub Class (descendent) Sub Class (descendent)

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Module Class Sub Class (modier)
  • State Rules Layout, Module JavaScript addClass, removeClass, toggleClass is- is-active is-tab-active is-hidden is-media-hidden http://smacss.com/book/type-state
  • State Class (modier) .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; } .is-hidden { display: none; }
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    State Class (modier)
  • Theme Rules theme- theme-a-background theme-a-border theme-b-background theme-b-border http://smacss.com/book/type-theme
  • Minimizing the Depth of Applicability http://smacss.com/book/applicability
  • Child Selector .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; } .is-hidden { display: none; }
  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    .media-img > img
  • Two core goals of SMACSS 1. HTML 2. HTML http://smacss.com/book/html5
  • Block Element Modier BEM
  • BEM Yandex http://bem.info/
  • BEM stands for Block Element Modier http://bem.info/method/denitions/
  • Block SMACSSModule Class http://bem.info/method/denitions/
  • Element .block__element SMACSSSub Class (descendent) http://bem.info/method/denitions/
  • Modier Block, Element .block_modifier .block__element_modifier SMACSSSub Class (Modier), State Rule http://bem.info/method/denitions/
  • Element Element

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Block Modier
  • .media { overflow: hidden; _overflow: visible; zoom: 1; } .media__img { float: left; margin-right: 10px; } .media__img > img { display: block; margin: 10px; } .media__body { overflow: hidden; } .media_shadow { box-shadow: 0 1px 5px rgba(0,0,0,0.75); }
  • MindBEMDing http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
  • MindBEMDing http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ BEM(by Nicolas Gallagher) .block__element .blockmodifier .block__elementmodifier
  • Element Element

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    Block Modier
  • 3. CSS Preprocessor for OOCSS
  • CSS Preprocessor for OOCSS & Combi