Don't Use These CSS Properties Wrong!
👋 Welcome Front-End Devs!
If you're a developer working with CSS—whether you're a beginner, MCA student, or aspiring front-end engineer—chances are you've unknowingly misused a few CSS properties along the way. These mistakes might look minor, but they can have a significant impact on user experience, performance, and layout stability. In this article, we're going to walk through 7 commonly misused CSS properties, explain why they break things, and show how to use them the right way.
By the end of this post, you'll walk away with cleaner code, better layout control, and more confidence during interviews and project work.
1. Misusing z-index Without position
The z-index property controls the vertical stacking order of elements. It's one of the most misunderstood CSS properties.
Wrong Usage:
.box {
z-index: 10;
}This won’t work unless the element has a positioning context. Without position being set to relative, absolute, fixed, or sticky, the z-index will not take effect.
Correct Usage:
.box {
position: relative;
z-index: 10;
}Always remember that z-index only works on elements with a specified position. Otherwise, increasing the z-index value will have no effect.
Tip: Use z-index with caution and document its usage in your CSS so it doesn’t grow into a chaotic value system.
2. Setting Width/Height Without box-sizing
By default, the width and height of an element don’t include padding or border, which can break your layout.
Wrong Usage:
.card {
width: 300px;
padding: 20px;
}This results in an actual box of 340px wide, not 300px, which may overflow containers.
Correct Usage:
.card {
width: 300px;
padding: 20px;
box-sizing: border-box;
}The box-sizing: border-box; rule ensures padding and border are included within the specified width and height.
Tip: Add box-sizing: border-box globally using the universal selector to avoid unexpected layout issues:
*, *::before, *::after {
box-sizing: border-box;
}3. Using absolute Without a Positioned Parent
Absolute positioning removes an element from the document flow and positions it relative to the nearest ancestor with position: relative (or similar).
Wrong Usage:
.tooltip {
position: absolute;
top: 0;
left: 0;
}If the parent has no position set, the tooltip may jump to the top-left of the page.
Correct Usage:
.wrapper {
position: relative;
}
.tooltip {
position: absolute;
top: 0;
left: 0;
}By setting the parent to position: relative, the tooltip will position itself correctly inside .wrapper.
Tip: Know when to use absolute, relative, and fixed based on layout needs and responsiveness.
4. Applying overflow: hidden Globally
Many developers apply overflow: hidden to the body or large containers to hide scrollbars or fix layout issues. This can backfire, especially with dropdowns, modals, or fixed elements.
Wrong Usage:
body {
overflow: hidden;
}This disables all scrolling on the page.
Correct Usage:
.modal-container {
overflow: hidden;
}Use overflow selectively and locally, not globally. If you do need to restrict scrolling for modal behavior, use JavaScript to toggle it dynamically.
5. Using 100vh on Mobile Devices
100vh sets the height to the full viewport height, but mobile browsers often add toolbars that reduce actual visible height. This causes content to overflow or hide behind UI elements.
Wrong Usage:
.hero {
height: 100vh;
}Correct Usage:
.hero {
height: 100svh; /* Safe on mobile */
}Or, use JavaScript to calculate and set the actual window height dynamically:
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);.hero {
height: calc(var(--vh, 1vh) * 100);
}This ensures your layout fits precisely across all devices.
6. Overusing !important
While !important is a useful tool, overusing it creates maintenance nightmares. It overrides all normal cascade rules, making debugging very difficult.
Wrong Usage:
.button {
color: white !important;
}Correct Usage:
.button.primary {
color: white;
}Tip: Refactor your CSS specificity instead of falling back on !important. Use structured class naming and avoid inline styles.
7. Forgetting inherit or initial When Resetting Styles
Sometimes developers hardcode styles when they just need to inherit or reset them.
Wrong Usage:
p {
font-size: 14px;
color: black;
}Correct Usage:
p {
font-size: inherit;
color: inherit;
}This makes your styles more flexible and reduces duplication.
Tip: initial resets a property to its browser default, while inherit takes it from the parent. Choose wisely.
Instagram Video - https://www.instagram.com/reel/DMUULytiMIa/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==
Popular Video - https://www.instagram.com/reel/DGIWJ2PpEcD/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==
🧠 Final Thoughts
CSS may look simple on the surface, but writing solid and bug-free styles requires attention to detail. Avoiding these common mistakes will not only help your UI behave more consistently but will also impress recruiters during code reviews or interviews. You can also create reusable utility classes and use CSS variables to scale your styles efficiently.
Remember, great front-end developers are not just good at writing code — they're great at avoiding problems before they happen. Consistent naming, sensible defaults, and thoughtful usage of properties make all the difference.
If you liked this article, make sure to check out our other posts:
📢 Stay tuned for more front-end development tips, tricks, and guides — only on MCA Waala!
Happy coding! 🚀
— The MCA Waala Team
comment 0 comments
more_vert