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
Text of CSS Architecture with OOCSS, SMACSS, BEM
CSS Architecture jsCafe 2014-03-09 KatsunoriTanaka with OOCSS,SMACSS,BEM
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/
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/
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.
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.