Block__Element—Magic: CSS Modularity for the Masses!

A presentation at Connect.Tech in October 2020 in by Chris DeMars

Slide 1

*Disclaimer

Slide 2

*Disclaimer 🎉 I 💚 CSS 🎉

Slide 3

I 💚 the #DeveloperCommunity

Slide 4

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

Slide 5

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

Slide 6

Slide 7

CSS

Slide 8

CSS CSS

Slide 9

CSS CSS CSS

Slide 10

CSS CSS CSS CSS

Slide 11

CSS CSS CSS CSS CSS

Slide 12

CSS IS STILL A THING!

Slide 13

Block__Element—Magic: CSS Modularity for the Masses!

Slide 14

Chris DeMars @saltnburnem

Slide 15

😢

Slide 16

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

Slide 17

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

Slide 18

!important === bad

Slide 19

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

Slide 20

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

Slide 21

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

Slide 22

WTF?

Slide 23

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.

Slide 24

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

Slide 25

Slide 26

Block__Element—Modifier

Slide 27

Block__Element—Modifier Syntax

Slide 28

Block__Element—Modifier Syntax Architecture

Slide 29

Block__Element—Modifier Syntax Architecture Semantic

Slide 30

Block__Element—Modifier Syntax Architecture Semantic Methodology

Slide 31

Naming Conventions

Slide 32

Naming Conventions ✅ Block__Element—Modifier

Slide 33

Naming Conventions ✅ Block_Element-Modifier ✅ Block__Element—Modifier

Slide 34

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

Slide 35

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

Slide 36

Slide 37

@micahgodbolt

Slide 38

Semantics

Slide 39

Semantics Developer semantics vs. HTML/CSS semantics

Slide 40

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

Slide 41

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

Slide 42

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

Slide 43

Slide 44

Slide 45

Use flex box or grid to center the contents.

Slide 46

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

Slide 47

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.

Slide 48

WAT?

Slide 49

Media Object with BEM and FlexBox

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Block The Shell The highest level of a component.

Slide 55

Block The Shell

Slide 56

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…

Slide 57

Slide 58

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

Slide 59

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…

Slide 60

Slide 61

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

Slide 62

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

Slide 63

Reusability

Slide 64

Style Naming

Slide 65

Style Naming Remember developer semantics?

Slide 66

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

Slide 67

Separation of Skin & Structure

Slide 68

Separation of Skin & Structure Just like OOCSS

Slide 69

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

Slide 70

Separate Skin & Structure

Slide 71

Separate Container & Content

Slide 72

Downfalls?

Slide 73

Chained Classes === Acceptable Bloat

Slide 74

Chained Classes === Acceptable Bloat Causes bloat

Slide 75

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

Slide 76

Slide 77

Slide 78

Alternative Methodologies

Slide 79

Alternative Methodologies

Slide 80

Alternative Methodologies

Slide 81

Alternative Methodologies OOCSS

Slide 82

Alternative Methodologies OOCSS

Slide 83

Atomic Design Brad Frost @brad_frost

Slide 84

Atomic Design Atoms Brad Frost @brad_frost

Slide 85

Atomic Design Atoms Molecules Brad Frost @brad_frost

Slide 86

Atomic Design Atoms Molecules Organisms Brad Frost @brad_frost

Slide 87

Atomic Design Atoms Molecules Organisms Templates Brad Frost @brad_frost

Slide 88

Atomic Design Atoms Molecules Organisms Templates Pages Brad Frost @brad_frost

Slide 89

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

Slide 90

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

Slide 91

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

Slide 92

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

Slide 93

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

Slide 94

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

Slide 95

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

Slide 96

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

Slide 97

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