117: Mitchell Hamilton - Writing CSS-in-JS with Emotion

Full Stack Radio

Episode | Podcast

Date: Thu, 20 Jun 2019 15:21:00 +0000

<p>Topics include:</p><ul> <li>What CSS-in-JS even is</li> <li>What Emotion does differently than other CSS-in-JS libraries</li> <li>How to actually use Emotion to style your projects</li> <li>How the JSX pragma works and what it's for</li> <li>How Emotion works under the hood</li> <li>Performance</li> <li>Adding global styles to your project</li> <li>Style re-use and composition in Emotion</li> <li>Using Emotion with server-side rendering</li> </ul><p>Sponsors:</p><ul> <li> <a href="https://cloudinary.com/users/register/free?utm_source=fullstackradio&amp;utm_medium=Sponsored_Podcast&amp;utm_content=fullstackradio_PodCast">Cloudinary</a>, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free</li> <li> <a href="https://www.digitalocean.com/?refcode=74a1c5d63dac&amp;utm_source=fullstackradio&amp;utm_medium=podcast&amp;utm_campaign=DO_Dev_Signup_Cold_FullStackRadio_Podcast">DigitalOcean</a>, get your free $50 credit at <a href="https://do.co/fullstack">do.co/fullstack</a> </li> </ul><p>Links:</p><ul> <li><a href="https://emotion.sh">Emotion</a></li> <li><a href="https://github.com/threepointone/glam">Glam</a></li> <li><a href="https://github.com/threepointone/glamor">Glamor</a></li> <li><a href="https://github.com/paypal/glamorous">Glamorous</a></li> <li><a href="https://www.styled-components.com/">Styled Components</a></li> <li><a href="https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#options">JSX pragma</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule">CSSStyleSheet.insertRule()</a></li> <li><a href="https://emotion.sh/docs/globals">Global styles in Emotion</a></li> <li><a href="https://emotion.sh/docs/ssr">Server-side rendering in Emotion</a></li> </ul>