This flowchart will help you pick the right CSS unit

The flowchart 👉 There are a lot of CSS length units to pick from—54 to be exact!—which can make it hard to know which one you should use. Luckily, there are only a handful that you’ll use most of the time, but it can still be hard to know what’s best, so I’ve made a flowchart to help you decide! 🔗 Links ✅ More on clamp() for font-size: ✅ Why em is good for spacing text: ✅ svh, lvh, dvh: ✅ Using min(), max(), and clamp() for padding and margin: ✅ Josh Comeau on the problem with 62.5% font-size on the html element: #the-sixtwofive-trick-13 ⌚ Timestamps 00:00 - Introduction 00:22 - The flowchart 01:54 - positioning, details, and effects 02:55 - font-size 08:00 - spacing 10:40 - Flex and Grid 14:25 - widths and heights #css -- Come hang out with other dev’s in my Discord Community 💬 Keep up to date with everything I’m up to ✉ Come hang out with me live every Monday on Twitch! 📺 --- Help support my channel 👨‍🎓 Get a course: 👕 Buy a shirt: 💖 Support me on Patreon: --- My editor: VS Code - --- I’m on some other places on the internet too! If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: Codepen: Github: --- And whatever you do, don’t forget to keep on making your corner of the internet just a little bit more awesome!
Back to Top