A presentation at Connect.Tech by Chris DeMars
*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!
for free. You
can too.