WTM19 - CSS for People That Hate CSS by Robin Dykema

What’s the difference between Flexbox and CSS grid? How can I create animations? Should I use a preprocessor? Why is it so hard to center a ?! Can’t I just use Bootstrap or Materials UI instead? Learn the basics of CSS, along with strategies and resources for writing better CSS.

https://youtu.be/C7enQQruv-Y

Transcript

1. CSS for People Who Hate CSS
2. Hello! I’m Robin Dykema. I’m a UI engineer at Taulia in Austin, TX. I’ve been using CSS since the days of my Geocities Backstreet Boys fan page.
3. What is CSS?
4. What is CSS? CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
5. What is CSS? Source: http://codemakerbd.blogspot.com/2018/09/what-is-css.html
6. HTML <header> My Title </header> CSS My Title
7. HTML <header> My Title </header> CSS header { color: blue; } My Title
8. HTML <header> My Title </header> CSS header { font-family: ‘Verdana’ } My Title
9. HTML <header> My Title </header> CSS header { text-transform: uppercase; } MY TITLE
10. HTML <header> My Title </header> CSS header { text-align: center; } My Title
11. Source: http://diana-adrianne.com/, https://codepen.io/ivorjetski/pen/xMJoYO
12. What we will cover in this talk ‐ Keeping a healthy mindset about CSS ‐ Basic CSS ‐ Intermediate CSS ‐ Resources
13. Keeping a healthy mindset about CSS
14. Growth mindset vs fixed mindset Source: https://medium.com/leadership-motivation-and-impact/fixed-v-growth-mindset-902e7d0081b3
15. You do NOT need to be good at design to be good at CSS.
17. Growth Mindset “I can separate my design skills from my CSS skills. If I’m given a mockup, I can learn how to turn that design into code.” Fixed mindset vs Growth mindset Fixed Mindset “I’m not good at design, so I’ll never be good at CSS.”
18. ANYONE can learn to write CSS
21. Basic CSS
22. Basic CSS concepts to master Display/Position Inline, block, inline-block Absolute, static, relative, fixed Selectors Type selectors, class selectors, id selectors, !important Specificity Cascading (C of CSS), CSS Box Model Content, padding, border, margin Box-sizing: border-box; Responsiveness Media queries, layouts Dev Tools Debugging / developing
23. HTML <header> My Title </header> CSS header { color: blue; } My Title
24. header { color: blue; } Selector
25. Selector header { color: blue; } Declaration block
26. Selector header { color: blue; } Declaration block Property Value
27. Basic CSS: Display block inline inline-block 1 2 1 2 1 2
29. Basic CSS: Position static, relative, absolute, fixed .parent { display: static; } .child { display: static; }
30. Basic CSS: Position static, relative, absolute, fixed .parent { display: static; } .child { display: absolute; bottom: 0; }
31. Basic CSS: Position static, relative, absolute, fixed .parent { display: relative } .child { display: absolute; bottom: 0; }
32. Basic CSS: Position static, relative, absolute, fixed .parent { display: relative } .child { display: fixed; bottom: 0; }
33. Basic CSS: CSS Box Model Content Padding Border Margin Button
34. Basic CSS: CSS Box Model box-sizing: content-box; (default)
35. Basic CSS: CSS Box Model box-sizing: border-box;
36. Basic CSS: CSS Box Model
37. Basic CSS: Understanding the cascade
38. Basic CSS: Selectors #happy-cake { /* CSS properties goes here */ } <!-- WILL match --> <div id="happy-cake"></div> <!-- Will NOT match --> <div id="sad-cake">Wrong ID!</div> <!-- Will NOT match --> <div class="happy-cake">That's not an ID!</div>
39. Basic CSS: Selectors .module { /* CSS properties goes here */ } <!-- WILL match --> <div class="module"></div> <!-- Will NOT match --> <div class=".module">The dot is for CSS, not HTML</div> <!-- Will NOT match --> <div class="bigmodule">Wrong class</div>
40. Basic CSS: Selectors h2 { /* CSS properties goes here */ } <!-- WILL match --> <h2>Hi, Mom</h2> <div> <!-- WILL match --> <h2>Anywhere</h2> </div> <!-- Will NOT match --> <div class="h2">Wrong tag, can't trick it</div>
41. Basic CSS: Pseudo selectors .pup:nth-child(even) { background-color: black; }
42. Basic CSS: Pseudo selectors Pseudo class :active, :hover, :focus, :visited :checked, :disabled :nth-child, :first-child, :last-child, :only-child Pseudo element ::before, ::after
43. Basic CSS: Selectors * selects all + selects direct sibling > selects direct child
44. Basic CSS: Specificity Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
45. Source: https://specifishity.com/
46. Source: https://specificity.keegan.st/
47. Don’t overwrite broken code; fix it! div.main > div > div#top + div#main ul li.selected > a[href*=”link”] + span.large { … }
48. Don’t overwrite broken code; fix it! div.main > div > div#top + div#main ul li.selected > a[href*=”link”] + span.large { … }
49. Don’t overwrite broken code; fix it!
50. Basic CSS: Responsiveness
51. Basic CSS: Responsiveness Source: https://internetingishard.com/html-and-css/responsive-design/
52. Basic CSS: Responsiveness /* Mobile Styles */ @media only screen and (max-width: 400px) { body { background-color: #F09A9D; /* Red */ } } /* Tablet Styles */ @media only screen and (min-width: 401px) and (max-width: 960px) { body { background-color: #F5CF8E; /* Yellow */ } } /* Desktop Styles */ @media only screen and (min-width: 961px) { body { background-color: #B2D6FF; /* Blue */ } } Source: https://internetingishard.com/html-and-css/responsive-design/
53. Basic CSS: Get to know dev tools Mac: cmd + control + i Windows: F12 Or: right click, “inspect”
54. Source: http://diana-adrianne.com/purecss-francine/
55. Source: http://diana-adrianne.com/purecss-francine/
57. Basic CSS: Get to know dev tools
58. Basic CSS: Floats?
59. Intermediate CSS
60. Intermediate CSS skills to master Cross Browser Compatibility Vendor prefixes, Page Layout Tools Flexbox, CSS grid Semantic HTML Stepping away from the <div> No Frameworks Removing reliance on Bootstrap, Materials UI, etc CSS Preprocessors Sass, Less, Stylus Naming Methodologies BEM, SMACSS, OOCSS
61. INTERMEDIATE CSS: CROSS BROWSER COMPATIBILITY
62. INTERMEDIATE CSS: CROSS BROWSER COMPATIBILITY Talk to your team about browsers you support Vendor prefixes ‐ -webkit-, -ms-, -moz- ‐ Add autoprefixer to your build process Can download a VM to test IE/Edge (see resources)
63. INTERMEDIATE CSS: PAGE LAYOUT TOOLS CSS Grid 2 dimensional (rows and columns) Best when starting from scratch Flexbox 1 dimensional (a row or a column) Best when adding a component to an existing layout
64. INTERMEDIATE CSS: PAGE LAYOUT TOOLS (Flexbox) div { display: flex; align-items: center; justify-content: center; } http://howtocenterincss.com/
66. Intermediate CSS: Semantic HTML Fewer <div>s and <span>s Prevents collision Source: https://internetingishard.com/html-and-css/semantic-html/
67. Intermediate CSS: Stepping away from frameworks To Bootstrap or not to Bootstrap?
68. Intermediate CSS: Stepping away from frameworks Many CSS frameworks out there: Bootstrap, Semantic UI, Material-UI Why you might use them: Quick side projects Beginners who don’t have the time to learn CSS
69. Intermediate CSS: Stepping away from frameworks Why you might not use them: Many times end up writing new rules on top of the library’s rules Looks like every other app using that library Nothing magical under the covers - just CSS TIP: Pick and choose UI elements you find aesthetically pleasing from those libraries and reproduce them with your own code
70. Intermediate CSS: Preprocessors Sass
71. Intermediate CSS: Preprocessors Sass, Less, Stylus Make it easier to write and organize CSS Nesting, variables, reusable mixins/functions, imports, extends, loops
72. Intermediate CSS: Naming methodologies BEM, SMACSS, OOCSS Provides a modular structure Reduce naming conflicts Source: https://medium.com/@dannyhuang_75970/what-is-bem-and-why-you-should-use-it-in-your-project-ab37c6d10b79
73. Resources
74. General CSS Resources https://css-tricks.com/ (bite-sized articles) https://www.pluralsight.com/paths/css (video, $) https://www.learnenough.com/css-and -layout-tutorial/introduction (ebook)
75. Flexbox https://flexboxfroggy.com/
76. CSS Grid https://cssgridgarden.com/
77. Specificity https://specifishity.com (chart) https://specificity.keegan.st/ (calculator) Cross Browser Compatibility https://developer.microsoft.com/en-us/ microsoft-edge/tools/vms/ (VM for testing IE or Edge)
78. Dev Tools https://developers.google.com/web/tool s/chrome-devtools/css/ Train your eyes to find CSS bugs https://cantunsee.space/
79. Removing dead CSS code https://github.com/purifycss/purifycss Autoprefixer https://github.com/postcss/autoprefixer
80. Cool stuff done using only CSS http://diana-adrianne.com/purecss-fr ancine/ https://a.singlediv.com/ https://codecampanion.blogspot.com/ 2018/10/the-mine-no-js-css-only-adv enture-game.html
81. THANKS! Any questions? Message me or find my slides on Twitter at @robindykema
82. Credits Special thanks to all the people who made and released these awesome resources for free: ‐ Presentation template by SlidesCarnival