Naming CSS Stuff is Really Hard

Lightning talk for Dayton Clean Coders, 05/25/2014

Transcript

1. @ethanmuller NAMING CSS STUFF IS REALLY HARD
2. SECTION 1: NAMING CSS STUFF IS REALLY EASY
3. <div class=“butts”>lol</div>
4. There are no rules.
5. /* help me */
6. SECTION 2: STRONG LINKS
7. .class-names are the links between {styles} and <elements>
8. “This element is styled this way because it is ________”
9. “This element is styled this way because it is ________” (insert class name here)
10. If saying this makes sense, you’ve got a strong link.
12. Strong links make for comprehendible, maintainable code
13. SECTION 3: THE THREE BIG CATEGORIES
14. Logical Presentational Content-based
15. THE THREE BIG CATEGORIES LOGICAL .negative-button! ! .important-heading! ! .subtle-text
16. THE THREE BIG CATEGORIES LOGICAL ‣ Styles are being applied for a reason ‣ The best option ‣ Usually not possible
17. THE THREE BIG CATEGORIES PRESENTATIONAL .big-text! ! .blue-button! ! .round-corners! ! .inset-box
18. THE THREE BIG CATEGORIES PRESENTATIONAL ‣ Names describe the appearance of elements ‣ Names are self-describing ‣ Presentation changes require markup changes ‣ Conducive to style reuse
19. THE THREE BIG CATEGORIES CONTENT-BASED .product-photo! ! .submit-button! ! .contact-name! ! .intro-text
20. THE THREE BIG CATEGORIES CONTENT-BASED ‣ Names are based on the content they’re styling ‣ Change presentation without touching markup ‣ Difficult to reuse styles ‣ Lots and lots of names ‣ Requires reading the stylesheet
21. Experts agree: Logical styles are best.
22. The problem is, Design ain’t always logical.
23. Logical Presentational Content-based
24. Let’s lay down a rule.
25. RULE-O-THUMB: The larger the project, the worse idea content- based classes are.
26. Let’s think of more rules.
27. THANKS! @ethanmuller ethan@heysparkbox.com