CSS Architecture with OOCSS, SMACSS, BEM

  • Published on
    11-Aug-2014

  • View
    4.558

  • Download
    0

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 & Combinator (LESS & SASS3.3~) Placeholder Selector (SASS) Combine multiples les 3.3~ // btn component .btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; &--red { background-color: red; } &--blue { background-color: blue; } } .btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } .btn--red { background-color: red; } .btn--blue { background-color: blue; } Single Class OOSCSS Multiple Classes Multiple Classes Single Classes Single Class %btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } %btn--red { background-color: red; } %btn--blue { background-color: blue; } .fire { @extend %btn; @extend %btn--red; } .stop { @extend %btn; @extend %btn--blue; } .fire, .stop { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } .fire { background-color: red; } .stop { background-color: blue; } Placeholder Selector Clean markup - single class Semantic class naming Avoid using too much @extend 4. Semantics About HTML semantics and front-end architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ ... not all semantics need to be content- derived http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ Content-layer semantics are already served by HTML elements and other attributes. HTML http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ Class names impart little or no useful semantic information to machines or human visitors... http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ The primary purpose of a class name is to be a hook for CSS and JavaScript. CSSJavaScript http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ Class names should communicate useful information to developers. http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ A exible and reusable component is one which neither relies on existing within a certain part of the DOM tree, nor requires the use of specic element types. http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ DOM CSS Class Naming Convention Semantic ? presentational / behavioural ? 5. Summary The Goals of Good CSS Architecture Predictable Reusable Maintainable Scalable http://philipwalton.com/articles/css-architecture/ Do you need a CSS Architecture & Methodology like OOCSS ? How many developers ? Reuse ? Maintainance ? Scale ? http://philipwalton.com/articles/css-architecture/ Bootstrap http://getbootstrap.com/ Topcoat http://topcoat.io/ Thank you so much jsCafe 2014-03-09 KatsunoriTanaka