Engineering Learning Lunch on Writing CSS as a Team

I decided to share a few tips around writing CSS with our engineering team as we think more about scalability and the growth of our team and consequently, our code.

Transcript

1. CSS is super cool
2. 1. Class selectors, 2. BEM naming conventions, 3. Listing css properties, 4. the impact of nesting
3. Performant selectors
4. .selector {…}
5. <div class=“selector”>…</div>
6. The difference between the best & worse case scenario targeting class selectors is surprisingly small
7. Δ = 50ms
8. “The focus should be on scalable CSS.” - Nicole Sullivan
9. Readability
10. Specificity > Brevity
11. vs. .profile-loading-indicator .loading
12. BEM
13. Block__element--Modifier
14. <div class="alert alert--error”></div>
15. .grid__col .grid__col--centered
17. “Follow the rules of semantics—make classes descriptive and not reliable on appearance of the given element.” - &yeT StyleGuide
18. listing properties
19. our compiled CSS shows re-ordered CSS properties
20. SO, we should base how we order them in our css files on what's easiest to search for, read, and debug.
21. a. Display properties (or things that affect the box model of an element or object) B. Type (things that affect how fonts are displayed and positioned & their corresponding Visual Styles) c. Decorative properties (properties that are specific to decoration on structural [non-typographic elements) D. Animations and/or element transitions
22. .block__element { box-sizing: border-box; display: block; height: $height; width: $width; margin: 0 auto; padding: 0; color: $color; font-family: $Open-Sans; font-size: 16px; /* px or rem preferred */ line-height: 1.5; /* integers preferred */ text-align: center; background: $bg-color url('images/bg.jpeg'); background-color: $bg-color; background-image: url('images/bg.jpeg'); background-position: center center; background-repeat: no-repeat; background-size: cover; border: 1px solid $border-color; }
23. "Would you write an email with no spaces?" - dan eden, animate.css
24. nesting
25. nesting isn’t great
26. nesting gives you unwavering control over the styling and positioning of an element
27. it also allows you to be specific
28. but it does these things at the cost of readable or legible code
29. as well as modularization and/or reusability
30. debugging deeply nested css can be a pain
31. typically getting around deeply nested styles (quickly) requires overriding the css with new (nested) styles
32. = a hot mess with too many page- specific styles
33. hard to maintain
34. hard to Debug
35. not performant
36. we should prioritize specificity and longevity
37. .box-thing .box-thing-1 {…}
38. CSS rules parse right to left.
39. .box__thing {…} .box__thing--modifying-styles {…}
40. "The descendant selector is the most expensive selector in CSS." - Dave Hyatt
41. hell yeah, css!