When I started learning CSS, it felt like magic… until nothing worked as expected. Here are five mistakes I made (and how you can avoid them):

  1. Using IDs Instead of Classes Mistake:

button { color: red; }

Why it’s bad: IDs are too specific and harder to override.

Fix:
Use classes instead:

.button { color: red; }

  1. Forgetting the Box Model Adding padding or borders without understanding width = unexpected layouts.

Fix:
Always remember:

Total Width = width + padding + border
Use box-sizing: border-box; to simplify things.

  1. Overusing !important This one creates chaos.

Fix:
Improve your selector strategy. Use !important only as a last resort.

  1. Not Using Browser DevTools Winging it without debugging slows you down.

Fix:
Right-click > Inspect Element. DevTools is your best friend.

  1. No Consistent Units Mixing px, %, em, and rem everywhere? Say less.

Fix:
Pick one or understand when to use what. rem for typography, px for spacing is a solid start.

Final Thoughts
We all mess up in the beginning. The goal is to learn and get better. What mistake did you make when learning CSS?__