Classifying Class Names

Slides for my talk for CSS Summit 2015 on naming CSS stuff.

Transcript

1. C L A SSI F YING CLASS NAMES ETHAN MULLER @ethanmuller 1
2. 2 Meet Ptravis.
3. 3 Meet Ptravis.
6. 6 I learned HTML from a virtual pterodactyl. #credentials
7. 7 I learned CSS from davesite.com* *Not a recommended resource
8. 8 Paraphrase from the intro to CSS on davesite.com* Imagine you've just designed a two hundred page web site, but at the last minute your client decides the font should be serif instead of sans-serif… *Still not a recommended resource
9. 9 This stuff is deeply embedded in our brains
10. 10 REQUEST #1 Be aware of your biases. Shelve them for now.
11. 11 REQUEST #2 Don’t worry about naming conventions or architecture for now.
12. CHAPTER 1: ELEMENTS and STYLES 12
13. 13 CONTENT & STYLING & INTERACTION
14. 14 CONTENT & STYLING & INTERACTION AREN’T ENTIRELY SEPERATE
15. 15 A RELATIONSHIP
16. p { margin-bottom: 1em; color: #222; } 16
17. 17 <p>Once upon a time…</p> gets a margin-bottom and color because it’s a paragraph
18. .fancy { color: chartreuse; background: url(razzle-dazzle.png); } 18
19. 19 <div class=“fancy”>wow</div> gets a text color and background because it’s a very fancy element
20. 20 [ELEMENT] gets [STYLES] because it’s a [SELECTOR]
21. 21 Selectors describe the relationship between blocks of styles & elements
22. 22 Class names let us name these relationships
23. 23 We’re focusing on class names today
24. CHAPTER 2: THE BEST CLASSES 24
25. 25 The Best Classes • Don’t need to change • Are reusable • Change easily when they inevitably change
26. CLASS TYPE 1/3 FUNCTIONAL CLASSES “Arguably the best kind of class name.” 26
27. 27 .positive-button .callout .selected-tab .subtle-text
28. 28 Functional classes indicate strong links.
29. 29 Functional classes don’t change much
30. 30 Functional classes are reusable
31. 31 Functional classes change gracefully
32. 32 When we learned CSS, we learned to use functional class names
33. 33 Bad news: Our styles aren’t always driven by function
34. 34 Bad news: Functional class names aren’t always possible
35. CHAPTER 3: A FORK in the R OA D 35
36. CLASS TYPE 2/3 CONTENT-BASED CLASSES “Uh. I can’t think of a functional class name.” 36
37. 37 .calendar-event .product-name .marketing .next-button
38. CLASS TYPE 3/3 PRESENTATIONAL CLASSES “Wait, seriously?” 38
39. 39 .big-heading .glowing-button .float-right .shake-animation
40. .purple-button { background: orange; } 40
41. 41 In defense of presentational classes…
42. 42 “Presentational classes aren’t semantic” is a bogus argument
43. 43 “… Class names cannot be ‘unsemantic’. Whatever names are being used: they have meaning, they have purpose.” Nicolas Gallagher, About HTML semantics and front-end architecture http://bit.ly/ccn-class-name-semantics
44. 44 There’s no such thing as an “unsemantic” class name
45. 45 “Presentational classes mix content and presentation” is a legitimate argument
46. 46 Presentational classes take a on the separation of concerns
47. 47 Ask yourself: How is a separation of concerns benefitting you?
48. 48 “But… but… what about the CSS Zen Garden!”
50. 50 CSS Zen Garden was created to showcase CSS to convince people to use CSS http://bit.ly/ccn-zen-garden
51. 51 CSS Zen Garden wasn’t created as an example of how to build maintainable websites
52. 52 Don’t optimize for a CSS-only redesign if you don’t have to.
53. 53 Presentational classes aren’t ideal. Presentational classes aren’t literally Satan, either.
54. 54 </soap-box>
55. 55 Presentational classes and content-based classes are both kinda crappy
56. 56 Let’s compare them
57. 57 Content-Based Separation of Concerns Presentational
58. 58 Content-Based Reusability Presentational
59. 59 Content-Based Ease of Change Presentational
60. 60 Content-based classes work better on small sites* Presentational classes work better on large sites* * Many, many caveats apply
61. THE FINAL CHAPTER: NAMING STUFF 61
62. 62 SITUATION: You have a thing that needs to be named
63. 63 1. Look for styles to reuse (refactor if needed)
64. 64 2. Ask why styles are applied to this element
65. 65 3. If there is a clear reason, use that reason as a class name
66. 66 4. If there isn’t a clear reason, try to name it after common patterns in UI
67. 67 5. If there isn’t a clear UI-related name, gauge how reusable you think your style block is
68. 68 6. If it feels reusable, and it doesn’t feel like a bad idea, use a presentational class name
69. 69 7. If it you don’t see yourself reusing these styles, use a content-based class name
70. 70 Congratulations. You named a thing. Good job, friend.
71. 71 REMEMBER: We’re all on team “I don’t want maintaining this to suck.”
72. 72 Further Reading Challenging CSS Best Practices by Thierry Koblentz http://bit.ly/ccn-presentation-post Cargo Cult CSS by Ben Darlow http://bit.ly/ccn-content-based-post Classy Values by Jeremy Keith http://bit.ly/ccn-classy-values
73. 73 Further Reading About HTML semantics and front-end architecture by Nicolas Gallagher http://bit.ly/ccn-class-name-semantics Why the Web Doesn't Need Another CSS Zen Garden (video) by David Shea http://bit.ly/ccn-zen-garden
74. 74 Thanks for listening. Stay classy. @ethanmuller