Ways to write BAD CSS

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! 😂

Comments

[Ben Sinclair]

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.

[Rupak Dey]

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 😂🤣

[Nikola Betica]

Was looking for this comment :)

[Arber Braja]

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.

[Rupak Dey]

Agreed! 🙌

[𒎏Wii 🏳️‍⚧️]

Misusing 'px'

Using 'px'

[Rupak Dey]

Can't deny! 😂