Block__Element--Magic: CSS Modularity for the Masses!

CodeMash 2017 & Detroit.Code() 2017 talk.

Transcript

1. WAT?
2. Block__Element--Magic: CSS Modularity for the Masses! @saltnburnem | Chris DeMars
3. *Disclaimer @saltnburnem | Chris DeMars
4. *Disclaimer @saltnburnem | Chris DeMars I CSS
5. @saltnburnem | Chris DeMars
6. @saltnburnem | Chris DeMars CSS
7. @saltnburnem | Chris DeMars CSS CSS
8. @saltnburnem | Chris DeMars CSS CSS CSS
9. @saltnburnem | Chris DeMars CSS CSS CSS CSS
10. @saltnburnem | Chris DeMars CSS CSS CSS CSS CSS
11. @saltnburnem | Chris DeMars “CSS is a key development skill.” - Ivana McConnell @ CSSConf AU
12. @saltnburnem | Chris DeMars “…also the problems with how we devalue things like CSS…” - Ivana Michael @ CSSConf AU
13. CSS IS STILL A THING! @saltnburnem | Chris DeMars
14. @saltnburnem | Chris DeMars Styled Components
15. @saltnburnem | Chris DeMars Styled Components CSS
16. Chris DeMars @saltnburnem
17. @saltnburnem | Chris DeMars About Me!
18. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl Develop It Ann Arbor About Me!
19. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl Develop It Ann Arbor Microsoft Community Contributor About Me!
20. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl Develop It Ann Arbor Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor About Me!
21. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl Develop It Ann Arbor Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor Open Source Contributor (a11y of rxjs docs) About Me!
22. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl Develop It Ann Arbor I love horror! Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor Open Source Contributor (a11y of rxjs docs) About Me!
23. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl Develop It Ann Arbor I love tattoos! I love horror! Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor Open Source Contributor (a11y of rxjs docs) About Me!
24. @saltnburnem | Chris DeMars Instructor, assistant, and speaker for Girl Develop It Ann Arbor I love tattoos! I love horror! Co-organizer for the Ann Arbor Accessibility Group Microsoft Community Contributor I live in Detroit! Open Source Contributor (a11y of rxjs docs) About Me!
25. @saltnburnem | Chris DeMars @TalesFTScript tftscript.com
26. Slides @saltnburnem | Chris DeMars http://bit.ly/2iSi7Hc
27. !important === bad @saltnburnem | Chris DeMars
28. @saltnburnem | Chris DeMars
29. @saltnburnem | Chris DeMars
30. @saltnburnem | Chris DeMars Harry Roberts @csswizardry http://csswizardry.com/
31. @saltnburnem | Chris DeMars Harry Roberts @csswizardry http://csswizardry.com/ http://csswizardry.com/2016/05/the-importance-of-important/
32. @saltnburnem | Chris DeMars BEM? I know, one more acronym that we need right?
33. @saltnburnem | Chris DeMars WTF?
34. @saltnburnem | Chris DeMars BEM, SMACSS, OOCSS, XP, HTML, HTML5, DHTML not really, XHTML, XML, PHP, MySQL, YourSQL, NoSQL, CSS, CSS3, CSS4 maybe, WCM, AWS, TDD, BDD, Sass, ES5, JSON, ES6, ESPN, and last but not least ESPN2.
35. @saltnburnem | Chris DeMars Thanks to Brad Frost for the idea for that slide! @brad_frost
36. @saltnburnem | Chris DeMars
37. @saltnburnem | Chris DeMars Block__Element--Modifier
38. @saltnburnem | Chris DeMars Block__Element--Modifier Syntax
39. @saltnburnem | Chris DeMars Block__Element--Modifier Syntax Architecture
40. @saltnburnem | Chris DeMars Block__Element--Modifier Syntax Semantic Architecture
41. @saltnburnem | Chris DeMars Block__Element--Modifier Syntax Methodology Semantic Architecture
42. @saltnburnem | Chris DeMars Naming Conventions
43. @saltnburnem | Chris DeMars Naming Conventions Block__Element--Modifier ✅
44. @saltnburnem | Chris DeMars Naming Conventions Block__Element--Modifier ✅ Block_Element-Modifier ✅
45. @saltnburnem | Chris DeMars Naming Conventions Block__Element--Modifier ✅ Block_Element-Modifier ✅ .card_body-copy
46. @saltnburnem | Chris DeMars Naming Conventions Block__Element--Modifier ✅ Block_Element-Modifier ✅ .card_body-copy .card_bodyCopy
47. @saltnburnem | Chris DeMars
48. @saltnburnem | Chris DeMars @micahgodbolt
49. @saltnburnem | Chris DeMars Semantics
50. @saltnburnem | Chris DeMars Semantics Developer semantics vs. HTML/CSS semantics
51. @saltnburnem | Chris DeMars Semantics Developer semantics vs. HTML/CSS semantics Is there really such a thing as CSS semantics??
52. @saltnburnem | Chris DeMars Semantics Developer semantics vs. HTML/CSS semantics Is there really such a thing as CSS semantics?? When creating classes, stick with developer semantics!
53. @saltnburnem | Chris DeMars 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
54. @saltnburnem | Chris DeMars
55. @saltnburnem | Chris DeMars
56. @saltnburnem | Chris DeMars Use flex box to center the contents.
57. @saltnburnem | Chris DeMars Use flex box to center the contents. Decide on consistent margins for components.
58. @saltnburnem | Chris DeMars Use flex box to center the contents. Decide on consistent margins for components. Establish consistent helper classes in incremental values, 5, 10, 15, etc.
59. @saltnburnem | Chris DeMars WAT?
60. @saltnburnem | Chris DeMars Media Object with BEM and FlexBox
61. @saltnburnem | Chris DeMars
62. @saltnburnem | Chris DeMars
63. @saltnburnem | Chris DeMars
64. @saltnburnem | Chris DeMars
65. @saltnburnem | Chris DeMars Block The Shell The highest level of a component.
66. @saltnburnem | Chris DeMars Block The Shell
67. @saltnburnem | Chris DeMars Element (image, heading, sub-heading, copy, etc.) Element is a child of block. Welcome to the party! Speaker Bio Chris DeMars is a Senior UI Developer at United Shore in Troy, Michigan. He is an instructor and teacher assistant for the…
68. @saltnburnem | Chris DeMars Element (image, heading, sub-heading, copy, etc.) Element is a child of block. Welcome to the party! Speaker Bio Chris DeMars is a Senior UI Developer at United Shore in Troy, Michigan. He is an instructor and teacher assistant for the…
69. @saltnburnem | Chris DeMars Element (image, heading, sub-heading, copy, etc.)
70. @saltnburnem | Chris DeMars 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 Senior UI Developer at United Shore in Troy, Michigan. He is an instructor and teacher assistant for the…
71. @saltnburnem | Chris DeMars 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 Senior UI Developer at United Shore in Troy, Michigan. He is an instructor and teacher assistant for the…
72. @saltnburnem | Chris DeMars Modifier (color, size, weight, etc.)
73. @saltnburnem | Chris DeMars “ We’re not designing pages, we’re designing systems of components. ” - Stephen Hay | @stephenhay
74. @saltnburnem | Chris DeMars Reusability
75. @saltnburnem | Chris DeMars Style Naming
76. @saltnburnem | Chris DeMars Style Naming Remember developer semantics?
77. @saltnburnem | Chris DeMars Style Naming Remember developer semantics? Be specific about what the class is supposed to style.
78. @saltnburnem | Chris DeMars Separation of Skin & Structure
79. @saltnburnem | Chris DeMars Separation of Skin & Structure Just like OOCSS
80. @saltnburnem | Chris DeMars Separation of Skin & Structure Just like OOCSS Thanks Nicole Sullivan!
81. @saltnburnem | Chris DeMars Separate Skin & Structure
82. @saltnburnem | Chris DeMars Separate Container & Content
83. @saltnburnem | Chris DeMars Downfalls?
84. @saltnburnem | Chris DeMars Chained Classes === Acceptable Bloat
85. @saltnburnem | Chris DeMars Chained Classes === Acceptable Bloat Causes bloat
86. @saltnburnem | Chris DeMars Chained Classes === Acceptable Bloat But it is very specific without the hassle of specificity. Causes bloat
87. @saltnburnem | Chris DeMars
88. @saltnburnem | Chris DeMars
89. @saltnburnem | Chris DeMars
90. @saltnburnem | Chris DeMars
91. @saltnburnem | Chris DeMars Alternative Methodologies
92. @saltnburnem | Chris DeMars Alternative Methodologies
93. @saltnburnem | Chris DeMars Alternative Methodologies
94. @saltnburnem | Chris DeMars Alternative Methodologies OOCSS
95. @saltnburnem | Chris DeMars Alternative Methodologies OOCSS
96. @saltnburnem | Chris DeMars Atomic Design Brad Frost @brad_frost
97. @saltnburnem | Chris DeMars Atomic Design Brad Frost Atoms @brad_frost
98. @saltnburnem | Chris DeMars Atomic Design Brad Frost Atoms Molecules @brad_frost
99. @saltnburnem | Chris DeMars Atomic Design Brad Frost Atoms Organisms Molecules @brad_frost
100. @saltnburnem | Chris DeMars Atomic Design Brad Frost Atoms Templates Organisms Molecules @brad_frost
101. @saltnburnem | Chris DeMars Atomic Design Brad Frost Atoms Pages Templates Organisms Molecules @brad_frost
102. @saltnburnem | Chris DeMars Atomic Design Brad Frost Atoms Pages Templates Organisms Molecules http://bradfrost.com/blog/post/atomic-web-design/ @brad_frost
103. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Scalable and Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
104. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Base Scalable and Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
105. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Base Layout Scalable and Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
106. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Base Modules Layout Scalable and Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
107. @saltnburnem | Chris DeMars SMACSS Jonathan Snook Base State Modules Layout Scalable and Modular Architecture for CSS https://smacss.com/book/categorizing @snookca
108. @saltnburnem | Chris DeMars OOCSS Nicole Sullivan Object oriented framework for repeating patterns in CSS. https://github.com/stubbornella/oocss/wiki @stubbornella
109. @saltnburnem | Chris DeMars OOCSS Nicole Sullivan Separate skin & structure Object oriented framework for repeating patterns in CSS. https://github.com/stubbornella/oocss/wiki @stubbornella
110. @saltnburnem | Chris DeMars OOCSS Nicole Sullivan Separate skin & structure Separate container & content Object oriented framework for repeating patterns in CSS. https://github.com/stubbornella/oocss/wiki @stubbornella
111. @saltnburnem | Chris DeMars Harry Roberts @csswizardry http://csswizardry.com/
112. @saltnburnem | Chris DeMars The Sky is the Limit!!!
113. @saltnburnem | Chris DeMars Take Aways
114. @saltnburnem | Chris DeMars Take Aways Flexible
115. @saltnburnem | Chris DeMars Take Aways Flexible Modular
116. @saltnburnem | Chris DeMars Take Aways Flexible Modular Semantic
117. @saltnburnem | Chris DeMars Take Aways Flexible Modular Semantic Organized
118. @saltnburnem | Chris DeMars CSS Feels!
119. @saltnburnem | Chris DeMars CSS Feels!
120. @saltnburnem | Chris DeMars TL;DD https://franzheidl.github.io/bemify/ https://www.npmjs.com/package/sass-bem
121. @saltnburnem | Chris DeMars Demo Time! https://codepen.io/chrisdemars/pen/xVRmpO
122. @saltnburnem | Chris DeMars Resources http://getbem.com/ https://css-tricks.com/bem-101/ http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ https://en.bem.info/
123. @saltnburnem | Chris DeMars Thanks!
124. @saltnburnem | Chris DeMars Thanks!
125. Chris DeMars @saltnburnem https://codepen.io/chrisdemars/pen/xVRmpO http://bit.ly/2iSi7Hc