*Disclaimer

*Disclaimer 🎉 I 💚 CSS 🎉

I 💚 the #DeveloperCommunity

“CSS is a key development skill.” - Ivana McConnell @ CSSConf AU

“…also the problems with how we devalue things like CSS…” - Ivana Michael @ CSSConf AU

CSS

CSS CSS

CSS CSS CSS

CSS CSS CSS CSS

CSS CSS CSS CSS CSS

CSS IS STILL A THING!

Block__Element—Magic: CSS Modularity for the Masses!

Chris DeMars @saltnburnem

😢

About Me! 💚 💚 💚 💚 💚 💚 International Speaker Google Developer Expert Microsoft MVP Cloudinary Media Developer Expert I love horror! I love tattoos!

@TalesFTScript http://www.talesftscript.com/

!important === bad

Harry Roberts @csswizardry http://csswizardry.com/

Harry Roberts @csswizardry http://csswizardry.com/ http://csswizardry.com/2016/05/the-importance-of-important/

BEM? I know, one more acronym that we need right?

WTF?

BEM, SMACSS, OOCSS, MERN, HTML, DHTML not really, XHTML, XML, PHP, MySQL, YourSQL, NoSQL, CSS, CSS3, CSS4 maybe, ARIA, AWS, TDD, BDD, Sass, JAM, JSON, ES6, ESPN, and last but not least ESPN2.

@brad_frost Thanks to Brad Frost for the idea for that slide!

Block__Element—Modifier

Block__Element—Modifier Syntax

Block__Element—Modifier Syntax Architecture

Block__Element—Modifier Syntax Architecture Semantic

Block__Element—Modifier Syntax Architecture Semantic Methodology

Naming Conventions

Naming Conventions ✅ Block__Element—Modifier

Naming Conventions ✅ Block_Element-Modifier ✅ Block__Element—Modifier

Naming Conventions ✅ Block_Element-Modifier ✅ Block__Element—Modifier .card_body-copy

Naming Conventions ✅ Block_Element-Modifier ✅ Block__Element—Modifier .card_body-copy .card_bodyCopy

@micahgodbolt

Semantics

Semantics Developer semantics vs. HTML/CSS semantics

Semantics Developer semantics vs. HTML/CSS semantics Is there really such a thing as CSS semantics??

Semantics Developer semantics vs. HTML/CSS semantics Is there really such a thing as CSS semantics?? When creating classes, stick with developer semantics!

Methodology “a set of methods, rules, or ideas that are important in a science or art : a particular procedure or set of procedures” *Merriam-Webster

Use flex box or grid to center the contents.

Use flex box or grid to center the contents. Decide on consistent margins for components.

Use flex box or grid to center the contents. Decide on consistent margins for components. Establish consistent helper classes in incremental values, 5, 10, 15, etc.

WAT?

Media Object with BEM and FlexBox

Block The Shell The highest level of a component.

Block The Shell

Element (image, heading, sub-heading, copy, etc.) Element is a child of block. Welcome to the party! Speaker Bio Chris DeMars is a Developer Advocate at Quicken Loans in Detroit, Michigan. He is an international speaker…

Element (image, heading, sub-heading, copy, etc.) Element is a child of block. Welcome to the party! Speaker Bio Chris DeMars is a Developer Advocate at Quicken Loans in Detroit, Michigan. He is an international speaker…

Element (image, heading, sub-heading, copy, etc.) Elements

Modifier (color, size, weight, etc.) Represents a different state or look of either block or element. Welcome to the party! Speaker Bio Chris DeMars is a Developer Advocate at Quicken Loans in Detroit, Michigan. He is an international speaker…

Modifier (color, size, weight, etc.) Represents a different state or look of either block or element. Welcome to the party! Speaker Bio Chris DeMars is a Developer Advocate at Quicken Loans in Detroit, Michigan. He is an international speaker…

Modifier (color, size, weight, etc.) Modifiers

“ We’re not designing pages, we’re designing systems of components. ” - Stephen Hay | @stephenhay

Reusability

Style Naming

Style Naming Remember developer semantics?

Style Naming Remember developer semantics? Be specific about what the class is supposed to style.

Separation of Skin & Structure

Separation of Skin & Structure Just like OOCSS

Separation of Skin & Structure Just like OOCSS Thanks Nicole Sullivan!

Separate Skin & Structure

Separate Container & Content

Downfalls?

Chained Classes === Acceptable Bloat

Chained Classes === Acceptable Bloat Causes bloat

Chained Classes === Acceptable Bloat Causes bloat But it is very specific without the hassle of specificity.

Alternative Methodologies

Alternative Methodologies

Alternative Methodologies

Alternative Methodologies OOCSS

Alternative Methodologies OOCSS

Atomic Design Brad Frost @brad_frost

Atomic Design Atoms Brad Frost @brad_frost

Atomic Design Atoms Molecules Brad Frost @brad_frost

Atomic Design Atoms Molecules Organisms Brad Frost @brad_frost

Atomic Design Atoms Molecules Organisms Templates Brad Frost @brad_frost

Atomic Design Atoms Molecules Organisms Templates Pages Brad Frost @brad_frost

Atomic Design Atoms Molecules Organisms Templates Pages Brad Frost @brad_frost http://bradfrost.com/blog/post/atomic-web-design/

SMACSS Scalable and Modular Architecture for CSS Jonathan Snook @snookca https://smacss.com/book/categorizing

SMACSS Scalable and Modular Architecture for CSS Base Jonathan Snook @snookca https://smacss.com/book/categorizing

SMACSS Scalable and Modular Architecture for CSS Base Layout Jonathan Snook @snookca https://smacss.com/book/categorizing

SMACSS Scalable and Modular Architecture for CSS Base Layout Modules Jonathan Snook @snookca https://smacss.com/book/categorizing

SMACSS Scalable and Modular Architecture for CSS Base Layout Modules State Jonathan Snook @snookca https://smacss.com/book/categorizing

OOCSS Object oriented framework for repeating patterns in CSS. Nicole Sullivan @stubbornella https://github.com/stubbornella/oocss/wiki

OOCSS Object oriented framework for repeating patterns in CSS. Separate skin & structure Nicole Sullivan @stubbornella https://github.com/stubbornella/oocss/wiki

OOCSS Object oriented framework for repeating patterns in CSS. Separate skin & structure Separate container & content Nicole Sullivan @stubbornella https://github.com/stubbornella/oocss/wiki

Harry Roberts @csswizardry http://csswizardry.com/

The Sky is the Limit!!!

Take Aways

Take Aways Flexible

Take Aways Flexible Modular

Take Aways Flexible Modular Semantic

Take Aways Flexible Modular Semantic Organized

CSS Feels!

CSS Feels!

Play with the demo! https://codepen.io/chrisdemars/pen/xVRmpO

Resources http://bit.ly/bem-resources

Thanks!

Thanks!