This flowchart will help you pick the right CSS unit

From the creator

The flowchart 👉 https://whatunit.com/ 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: https://youtu.be/U9VF-4euyRost ✅ Why em is good for spacing text: https://youtu.be/Gx0iZrN-0L4 ✅ svh, lvh, dvh: https://youtu.be/ru3U8MHbFFI ✅ Using min(), max(), and clamp() for padding and margin: https://youtu.be/7khSaA91e04?si=pD9m-rgZG3sxddmU ✅ Josh Comeau on the problem with 62.5% font-size on the html element: https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#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 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visuals

Published 2023-11-21 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.