CSS Isn't Scary

Presented at Indy.Code() on April 18, 2018

Transcript

1. CSS Isn't Scary @sublimemarch
2. Stephanie Slattery @sublimemarch @sublimemarch
3. Raise your hand if... @sublimemarch
4. "CSS is strangely considered both one of the easiest and one of the hardest languages to learn as a web developer." @sublimemarch
5. 1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS @sublimemarch
6. 1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS @sublimemarch
7. @sublimemarch
8. @sublimemarch
9. @sublimemarch
10. @sublimemarch
11. CSS is declarative. @sublimemarch
12. In this declarative language... ✦ the last rule declared takes precedence ✦ the rule declared on the most specific selector takes precedence ✦ there's no such thing as scope - everything is global! @sublimemarch
13. @sublimemarch
14. @sublimemarch
15. CSS IS awful! @sublimemarch
16. CSS IS awesome! @sublimemarch
17. 1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS @sublimemarch
18. The Separation of Controls Principle @sublimemarch
19. "A design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. A concern is a set of information that affects the code of a computer program." - Wikipedia @sublimemarch
20. We separate concerns into HTML, CSS, and Javascript. @sublimemarch
21. HTML organizes content. @sublimemarch
22. CSS defines presentation. @sublimemarch
23. JS defines how content interacts and behaves with the user. @sublimemarch
24. CSS is flexible. @sublimemarch
25. CSS is made of simple things. @sublimemarch
26. .selector { name: value; } @sublimemarch
27. CSS is easy to generate. @sublimemarch
28. CSS stands alone. @sublimemarch
29. Just look at this! Or this! @sublimemarch
30. CSS is open source. @sublimemarch
31. ✨ CSS tries its best. ✨ @sublimemarch
32. 1. Why CSS is scary 2. Why CSS is great! 3. How to write better CSS @sublimemarch
33. CSS stops being scary when you understand it and follow best practices. @sublimemarch
34. CSS is just another programming language @sublimemarch
35. Apply your programming skills: ✦ Reading the docs ✦ Planning your code ✦ Pseudocoding ✦ Refactoring @sublimemarch
36. Understand specificity @sublimemarch
37. Understand specificity 0. Inline styles @sublimemarch
38. Understand specificity 0. Inline styles 1. IDs @sublimemarch
39. Understand specificity 0. Inline styles 1. IDs 2. Classes, attributes, and pseudo-classes [type="radio"] :hover @sublimemarch
40. Understand specificity 0. Inline styles 1. IDs 2. Classes, attributes, and pseudo-classes 3. Elements and pseudo-elements @sublimemarch
41. Understand specificity 0. Inline styles 1. IDs 2. Classes, attributes, and pseudo-classes 3. Elements and pseudo-elements h1 :before @sublimemarch
42. Don't guess and check for specificity! @sublimemarch
43. http://specificity.keegan.st/ @sublimemarch
44. Don't over-specify #home #hero #claim .logo h2 { display: inline-block; } @sublimemarch
45. Don't over-specify #home #hero #claim .logo h2 { display: inline-block; } For any h2 inside anything with the logo class that's inside of the claim element that's inside of the hero element that's inside of the home element, display with inline-block. @sublimemarch
46. Very specific selectors are hard to override in the future. @sublimemarch
47. No !important flags <p id="pink-text">Kittens are cute.</p> @sublimemarch
48. No !important flags <p id="pink-text">Kittens are cute.</p> #pink-text { color: pink; } @sublimemarch
49. No !important flags <p id="pink-text">Kittens are cute.</p> #pink-text { color: pink; } p { color: black !important; } @sublimemarch
50. And no inline styles <div style="color: pink;">I love kittens.</div> @sublimemarch
51. Use a single class as your selector .hero-text-link { font-size: 18px; } @sublimemarch
52. Use a single class as your selector .hero-text-link { font-size: 18px; } instead of something more complex .hero p a { font-size: 18px; } @sublimemarch
53. Keep it DRY @sublimemarch
54. Keep it DRY (don't repeat yourself) @sublimemarch
55. <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; } @sublimemarch
56. instead <h2 class="fun-title pink-title">Hello</h2> .fun-title, .pink-title { font-family: "Comic Sans", sans-serif; } .pink-title { color: pink; } @sublimemarch
57. or even better <h2 class="title pink-title">Hello</h2> .title { font-family: "Comic Sans", sans-serif; } .pink-title { color: pink; } @sublimemarch
58. or even better-er <h2 class="title pink">Hello</h2> .title { font-family: "Comic Sans", sans-serif; } .pink.title { color: pink; } @sublimemarch
59. CSS extensions make this even easier! @sublimemarch
60. <h2 class="pink-title">Hello!</h2> .title { font-family: "Comic Sans", sans-serif; } .pink-title { @extend .title; color: pink; } @sublimemarch
61. Organize your CSS. @sublimemarch
62. @sublimemarch
63. Organize your files, but also your selectors. @sublimemarch
64. hacks.css @sublimemarch
65. In hacks.css, you should leave: ✦ your hacky code ✦ why you did it ✦ possible ways to fix it @sublimemarch
66. 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 @sublimemarch
67. Understand browser compatibility. @sublimemarch
68. https://caniuse.com/ @sublimemarch
69. And so much more! - learn the box model - use flexbox - pick a preprocessor - implement a naming methodology like BEM or OOCSS - use a linter - look at dev tools - use a CSS reset @sublimemarch
70. CSS IS awesome! (mostly) @sublimemarch
71. Stephanie Slattery @sublimemarch @sublimemarch