A guide on how to create multi-purpose, modular & scalable React Modals

Photo by Simon Goetz

Starting out

For this guide, you can use any project you already have and want to create your modal in, because we’re going to focus primarily on the modal components. …

Write a cleaner CSS with :where() and :is() pseudo-classes

Photo by Joshua Aragon


Think about when you want to apply the same styling to multiple elements in your HTML. You’d probably end up with something that looks like this:

.main h1,
.main h2,
.main .heading, {
line-height: 1.2;
.nav li,
.nav p {
padding: 5px 10px;

Roi Livne

Full Stack Developer. https://www.roilivne.dev/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store