What If CSS Was Object-Oriented?

Made in collaboration with the inimitable Ben Bayard, presented originally for the Moovweb Tech Services team.

A lot of times developers with stronger CS backgrounds than web experience write brute-forced CSS because it's not a real programming language with real language features. This is a talk about using object-oriented principles with Sass to write excellent styles.

Transcript

1. CSS WHAT IF WAS OBJECT ORIENTED?
2. (YOU KNOW, LIKE A REAL LANGUAGE)
3. (ALSO, WHY DO YOU CARE?)
4. BECAUSE object-oriented code: Is EASIER TO UNDERSTAND
5. BECAUSE object-oriented code: Is EASIER TO MAINTAIN
6. BECAUSE object-oriented code: Is EASIER TO ITERATE UPON
7. LET’S DO SOME OBJECT-ORIENTED STYLING
8. TAKE THIS ELEMENT FOR EXAMPLE: My Cool Heading! LET’S DESCRIBE IT AS AN OBJECT
9. USING PSEUDO-CODE
10. class blueHeading implements Font(); blueHeading.fontColor = "#56A9F6"; blueHeading.fontSize = "32px"; blueHeading.fontWeight = "bold"; blueHeading.underline = true; blueHeading.capitalize = "capitalize"; blueHeading.lineHeight = goldenRatio("32px");
11. AWESOME
12. Let’s do a little refactoring
13. var size = "32px"; class blueHeading implements Font({ capitalize: "capitalize", fontColor: "#56A9F6", fontSize: size, fontWeight: "bold", underline: true, lineHeight: goldenRatio(size) });
14. Let’s do the same thing for this heading: Even Cooler Heading A NEW CHALLENGER APPROACHES!
15. var size = "32px"; class redHeading implements Font({ capitalize: "capitalize", fontColor: "#84120A", fontSize: size, fontWeight: "bold", underline: true, lineHeight: goldenRatio(size) });
16. WAIT A SECOND
17. var size = "32px"; class redHeading implements Font({ capitalize: "capitalize", fontColor: "#84120A", fontSize: size, fontWeight: "bold", underline: true, lineHeight: goldenRatio(size) }); var size = "32px"; class blueHeading implements Font({ capitalize: "capitalize", fontColor: "#56A9F6", fontSize: size, fontWeight: "bold", underline: true, lineHeight: goldenRatio(size) });
18. REPETITION UGH THERE’S SO MUCH
19. But thanks to Objects WE CAN DRY this up! (DON’T REPEAT YOURSELF)
20. var size = "32px"; ! class Heading implements Font({ capitalize: "capitalize", fontSize: size, fontWeight: “bold", lineHeight: goldenRatio(size), underline: true }); ! var redHeading = new Heading({ color: "#84120A" }); ! var blueHeading = new Heading({ color: "#56A9F6" });
21. WAIT A SECOND
22. WE CAN DO THIS IN SASS
23. // A Variable var size = "32px"; $size: 32px;
24. // A Variable var $size Have I blown your mind yet?
25. // an extensible class and functions! class Heading implements Font({ capitalize: "capitalize", fontSize: size, fontWeight: "bold", underline: true, lineHeight: goldenRatio(size), }); %heading { font-size: $size; font-weight: bold; text-transform: capitalize; text-decoration: underline; @include line-height(golden-ratio(size)); }
26. // the implementing objects var redHeading = new Heading({ color: "#84120A" }); ! var blueHeading = new Heading({ color: "#56A9F6" }); .red-heading { color: "#84120A"; @extend %heading; } .blue-heading { color: "#56A9F6"; @extend %heading; }
27. WTFUH EXTEND?! // the implementing objects var color: }); ! var color: }); .red-heading } .blue-heading }
28. LET’S PUT IT ALL TOGETHER
29. $size: 32px; ! %heading { font-size: $size; font-weight: bold; text-transform: capitalize; text-decoration: underline; @include line-height(golden-ratio(size)); } ! .red-heading { color: "#84120A"; @extend %heading; } .blue-heading { color: "#56A9F6"; @extend %heading; }
30. YAY
31. CLEAN CODE
32. LESS TEDIUM
33. HAPPY DEVS
34. NOW:
35. WHAT CAN THE OBJECT-ORIENTED APPROACH TEACH US ABOUT STYLING?
36. DON’T THINK: how do I style this?
37. INSTEAD THINK: WHAT IS THIS THING I’M STYLING?
38. DON’T THINK: WHAT DOES IT LOOK LIKE?
39. INSTEAD THINK: WHAT DOES IT BEHAVE LIKE?
40. WHAT DOES IT BEHAVE LIKE? HEADINGS CONTAINERS BUTTONS DROP-DOWNS BARS MODALS POTATOES CAROUSELS INPUTS SLIDERS TOGGLERS TEXT SNIPPETS LINKS
41. EVERYTHING IS SOMETHING
42. GO FORTH AND WRITE
 AWESOME SASS
43. Q+A