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 Miriam Suzanne on LinkedIn Miriam Suzanne on GitHub Miriam Suzanne OddBird Teacup Gorilla Grapefruit Lab Riding Sidesaddle* The Post-Obsolete Book Why is CSS So Weird? Storybook Mozilla Developer on YouTube CSS The Card Game Tierney's gist for playing Among Us "locally" Theragun Funny Style Stages by Stephanie Eckles Layout Land on YouTube ASLU Dictionary by Bill VicarsFreedom is a Constant Struggle Queen Incomplete List of Mistakes in the Design of CSS Enjoy the Vue on Twitter Enjoy the Vue Special Guest: Miriam Suzanne.Support Enjoy the Vue