Episode 44: CSS, Sass, and Playwriting with Miriam Suzanne

Key Points From This Episode: - Miriam’s advice for getting started in CSS, especially those coming from other languages. - How CSS provides the tools to deal with its inherent and absurd lack of control. - The history of browsers with style capabilities and how CSS was a response to that idea. - We learn why Miriam is ambivalent to tools like Tachyon or Tailwind. - What developing Sass helped Miriam learn about CSS, and why Sass can’t contextualize the complexity of CSS for users. - The design systems approach Miriam chooses, depending on the client, and she loves Sass. - Addressing scoping – Miriam describes how her preferred tool, View Solution works. - Some common scoping or CSS patterns that Miriam disagrees with, and the patterns or paradigms she thinks deserve more attention. - Miriam talks about the CSS spec work she is doing and why she felt the need to do it. - Problem-solving when debugging – Miriam suggests looking at browser dev tools and property when inspecting an element. - Miriam explains the layout models in CSS, and how others can understand them better. - CSS is communicating meaningfully to the browser, how to make smart decisions for us. - Masonry layout – what it is, why it’s considered the holy grail layout, why it’s tough to build. - CSS, specs, browser implementation, and rules – Miriam lays out what CSS actually is. - Which of the things that are broken or unintuitive in CSS Miriam would like to change. - The panel shares the worst thing they have done in CSS and the thing they are proudest of. - Miriam shares her worst CSS experience, which was during the height of maintaining Susy. - Tessa’s picks include Mozilla Developer videos and CSS The Card Game. - Ben’s picks this week involve fixing back pain with a massage gun and a song called Funny. - Miriam shares her picks, including A CSS showcase called Style Stage, the Layout Land videos, and an ASL dictionary. - To close the show is Ari’s pick, which is simply Queen by Perfume Genius. Tweetables: - “[CSS is] a collaboration with browsers and with users, everything is contextual, it's meant to be that way. Browser differences are a feature, your code breaking is a feature… That’s just the way it is. It’s one weird big performance art.” — @mirisuzanne [0:02:36] - “CSS is all about communicating meaningfully to the browser how to make smart decisions for us. Telling it this is a flex situation, or this is a grid situation, or this is a float situation is meaningful information that the browser can use to make decisions on our behalf in contexts we haven't thought about.” — @mirisuzanne [0:34:18] - “My key to writing CSS is always try to convey as much information as we can to the browser in small ways.” — @mirisuzanne [0:34:28] - “Responsive web design taught us to remove all intrinsic sizes and put a percentage on everything, everything is fluid. If you’ve ever heard Jen Simmons talk about intrinsic design, she's trying to push back on that one aspect of responsive.” — @mirisuzanne [0:47:44] Links Mentioned in Today’s Episode: - Miriam Suzanne on Twitter (https://twitter.com/mirisuzanne) - Miriam Suzanne on LinkedIn (https://www.linkedin.com/in/mirisuzanne/) - Miriam Suzanne on GitHub (https://github.com/mirisuzanne) - Miriam Suzanne (https://www.miriamsuzanne.com/) - OddBird (https://www.oddbird.net/) - Teacup Gorilla (https://www.teacupgorilla.com/) - Grapefruit Lab (https://www.grapefruitlab.com/) - Riding Sidesaddle* (http://www.springgunpress.com/riding-sidesaddle-miriam-suzanne/) - The Post-Obsolete Book (http://www.post-obsolete.com/) - Why is CSS So Weird? (https://youtu.be/aHUtMbJw8iA) - Storybook (https://storybook.js.org/) - Mozilla Developer on YouTube (https://www.youtube.com/channel/UCh5UlGiu9d6LegIeUCW4N1w) - CSS The Card Game (https://github.com/hanilim/css-the-card-game) - Tierney's gist for playing Among Us "locally" (https://gist.github.com/bnb/b3775122759fe22c9628ac284bd96bfb) - Theragun (https://www.theragun.com/) - Funny (https://youtu.be/uDE5ygucFyY) - Style Stages by Stephanie Eckles (https://stylestage.dev/) - Layout Land on YouTube (https://www.youtube.com/c/LayoutLand) - ASLU Dictionary by Bill Vicars (https://www.lifeprint.com/)Freedom is a Constant Struggle (https://www.amazon.com/Freedom-Constant-Struggle-Palestine-Foundations/dp/1608465640) - Queen (https://youtu.be/Z7OSSUwPVM4) - Incomplete List of Mistakes in the Design of CSS (https://wiki.csswg.org/ideas/mistakes) - Enjoy the Vue on Twitter (https://twitter.com/enjoythevuecast?lang=en) - Enjoy the Vue (https://enjoythevue.io/) Special Guest: Miriam Suzanne.