CSS Isn't Sccary

"CSS Isn't Scary: How to Stop Worrying and Love Front End" is aimed at programmers who've written enough CSS to feel frustrated and is intended to help developers feel more comfortable with CSS. This talk was delivered at Chicago Coder Conference 2017 to an audience of mixed skill levels and knowledge of CSS.

Transcript

1. CSS ISN'T SCARY: HOW TO STOP WORRYING AND LOVE FRONT END with Stephanie Slattery CSS Isn't Scary | @sublimemarch
2. #CODERCONFERENCE @SUBLIMEMARCH CSS Isn't Scary | @sublimemarch
3. Raise your hand if... CSS Isn't Scary | @sublimemarch
4. 1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS CSS Isn't Scary | @sublimemarch
5. 1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS CSS Isn't Scary | @sublimemarch
6. CSS Isn't Scary | @sublimemarch
7. CSS Isn't Scary | @sublimemarch
8. CSS Isn't Scary | @sublimemarch
9. CSS Isn't Scary | @sublimemarch
10. CSS Isn't Scary | @sublimemarch
11. CSS IS DECLARATIVE CSS Isn't Scary | @sublimemarch
12. CSS Isn't Scary | @sublimemarch
13. CSS Isn't Scary | @sublimemarch
14. CSS IS awful! CSS Isn't Scary | @sublimemarch
15. CSS IS awesome! CSS Isn't Scary | @sublimemarch
16. 1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS CSS Isn't Scary | @sublimemarch
17. THE SEPARATION OF CONTROLS PRINCIPLE CSS Isn't Scary | @sublimemarch
18. CSS IS FLEXIBLE CSS Isn't Scary | @sublimemarch
19. CSS IS MADE OF SIMPLE THINGS CSS Isn't Scary | @sublimemarch
20. .selector { name: value; } CSS Isn't Scary | @sublimemarch
21. CSS IS EASY TO GENERATE CSS Isn't Scary | @sublimemarch
22. CSS STANDS ALONE CSS Isn't Scary | @sublimemarch
23. Just look at this! Or this! CSS Isn't Scary | @sublimemarch
24. CSS IS OPEN SOURCE CSS Isn't Scary | @sublimemarch
25. 1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS CSS Isn't Scary | @sublimemarch
26. CSS IS JUST ANOTHER PROGRAMMING LANGUAGE CSS Isn't Scary | @sublimemarch
27. UNDERSTAND SPECIFICITY 0. Inline styles 1. IDs 2. Classes, attributes, and pseudo-classes 3. Elements and pseudo-elements CSS Isn't Scary | @sublimemarch
28. DON'T GUESS AND CHECK FOR SPECIFICITY CSS Isn't Scary | @sublimemarch
29. http://specificity.keegan.st/ CSS Isn't Scary | @sublimemarch
30. DON'T OVER-SPECIFY #home #hero #claim .logo h2 { display: inline-block; } CSS Isn't Scary | @sublimemarch
31. DON'T PUT HTML COMPONENTS IN SELECTORS a { text-decoration: none; } CSS Isn't Scary | @sublimemarch
32. NO !IMPORTANT FLAGS .pink-text { color: pink !important; } CSS Isn't Scary | @sublimemarch
33. AND ABSOLUTELY NO INLINE STYLES <div style="color: red; font-size: 14px;">Hello!</div> CSS Isn't Scary | @sublimemarch
34. USE A SINGLE CLASS AS YOUR SELECTOR .hero-text-link { font-size: 18px; } INSTEAD OF SOMETHING MORE COMPLEX .hero p a { font-size: 18px; } CSS Isn't Scary | @sublimemarch
35. KEEP IT DRY CSS Isn't Scary | @sublimemarch
36. <h2 class="fun-title pink-title">Hello</h2> .fun-title { font-family: "Comic Sans", sans-serif; } .pink-title { font-family: "Comic Sans", sans-serif; color: pink; } CSS Isn't Scary | @sublimemarch
37. INSTEAD <h2 class="fun-title pink-title">Hello</h2> .fun-title, .pink-title { font-family: "Comic Sans", sans-serif; } .pink-title { color: pink; } CSS Isn't Scary | @sublimemarch
38. OR EVEN BETTER <h2 class="title pink-title">Hello</h2> .title { font-family: "Comic Sans", sans-serif; } .pink-title { color: pink; } CSS Isn't Scary | @sublimemarch
39. CSS TRANSPILERS MAKE THIS EVEN EASIER CSS Isn't Scary | @sublimemarch
40. <h2 class="pink-title">Hello!</h2> .title { font-family: "Comic Sans", sans-serif; } .pink-title { @extend .title; color: pink; } CSS Isn't Scary | @sublimemarch
41. ORGANIZE YOUR CSS CSS Isn't Scary | @sublimemarch
42. HACKS.CSS CSS Isn't Scary | @sublimemarch
43. PUT IT IN A HACKS.CSS FILE IF YOU'RE ▸ using magic numbers ▸ writing overly specific selectors ▸ using !important flags ▸ undoing styles that are elsewhere in the code CSS Isn't Scary | @sublimemarch
44. UNDERSTAND BROWSER COMPATIBILITY CSS Isn't Scary | @sublimemarch
45. https://caniuse.com/ CSS Isn't Scary | @sublimemarch
46. AND SO MUCH MORE! - learn the box model - use flexbox - pick a preprocessor - implement a naming methodology like BEM or OOCSS - try visual diffs to test your code - use a linter - look at dev tools - use a CSS reset CSS Isn't Scary | @sublimemarch
47. CSS IS awesome! (MOSTLY) CSS Isn't Scary | @sublimemarch
48. STEPHANIE.SLATTERY.WEBSITE CSS Isn't Scary | @sublimemarch