Misusing Shorthand
/*bad*/
.item { margin: 0 1rem 0 0; }
/*good*/
.item { margin-right: 1rem; }
Misusing 'px'
/*bad*/
.item {
width: 16.5px;
height: 16.5px;
}
/*good*/
.item {
width: 16px;
height: 16px;
}
Silly z-index
/*bad*/
.overlay { z-index: 999...9; }
.box { z-index: 999...9; }
/*good*/
.overlay { z-index: 3; }
.box { z-index: 4; }
Disliking border box
/*bad*/
.button {
width: calc(100% - 2rem);
padding: 0 1rem;
}
/*good*/
* { box-sizing: border-box; }
.button {
width: 100%;
padding: 0 1rem;
}
Are you guilty of practicing any?
Oh...me? For sure! 😂
Top comments (7)
I think making z-indexes multiples of 10 or 100 is a sound idea, for the same reason it made sense in BASIC line numbering. Without a system to renumber them for you, if you want something to appear between two layers, you're in for a long morning.
Unfortunately, z-index is one of those properties that doesn’t always behave in an intuitive way. It seems simple at first; a higher z-index number means the element will be on top of elements with lower z-index numbers. But there are some additional rules that make things more complicated.
Anyway, all developers go by one rule : 'If it works, don't touch it!' 😂
So, if multiples of 10 or 100 is working, you know what to do 😂🤣
Was looking for this comment :)
It's always easier to write bad code then good code.
I'm guilty. Guilty for having written a lot of bad CSS in my other life :P
You have to see the bad to learn that things need to be improved and then start learning how to improve those things.
So it is a process, a step where usually each of us goes through.
Agreed! 🙌
Using 'px'
Can't deny! 😂