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

November 30, 2020Enjoy the Vue

Writing consistent and readable CSS that will scale well is a challenging process, some might even say an art, and CSS extensions like Sass can help to add power and elegance to the basic language. Today’s guest, Miriam Suzanne, hopes to create art and software that celebrates the queer complexity of human experience. Miriam is Founder of OddBird, enthusiast for modern CSS, and open-source creator of Sass tools like Susy & True. Miriam also creates music with Teacup Gorilla, theater with Grapefruit Lab, and visual art for albums, book-covers, and galleries. Formerly Artistic Director of New World Arts, and Technical Director of The LIDA Project, she won the 2017 True West Award for the stage adaptation, 10 Myths on the Proper Application of Beauty Products. Miriam is also the author of Riding SideSaddle* and The Post-Obsolete Book, both published by SpringGun Press. In this episode, Miriam shares her advice for those coming from other languages who want to get into CSS, what CSS actually is, and what developing Sass taught her about CSS. She also addresses scoring, spec work, debugging, and layout models, as well as how to provide as much information as possible for CSS, why masonry layout is considered the holy grail layout, and the best and worst things she has ever done with CSS. Tune in today to find out more about CSS from an expert and, of course, to hear this week’s picks!

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:

Special Guest: Miriam Suzanne.

Audio Player