DEV Community

loading...

Ways to write BAD CSS

deyrupak profile image Rupak Dey ・1 min read

Misusing Shorthand

/*bad*/

.item { margin: 0 1rem 0 0; }

/*good*/

.item { margin-right: 1rem; }
Enter fullscreen mode Exit fullscreen mode


Misusing 'px'

/*bad*/

.item {
   width: 16.5px;
   height: 16.5px;
}

/*good*/

.item {
   width: 16px;
   height: 16px;
}
Enter fullscreen mode Exit fullscreen mode


Silly z-index

/*bad*/

.overlay { z-index: 999...9; }

.box { z-index: 999...9; }

/*good*/

.overlay { z-index: 3; }

.box { z-index: 4; }
Enter fullscreen mode Exit fullscreen mode


Disliking border box

/*bad*/

.button { 
   width: calc(100% - 2rem);
   padding: 0 1rem; 
}

/*good*/

* { box-sizing: border-box; }

.button { 
   width: 100%;
   padding: 0 1rem; 
}
Enter fullscreen mode Exit fullscreen mode


Are you guilty of practicing any?

Oh...me? For sure! πŸ˜‚

Discussion (7)

pic
Editor guide
Collapse
moopet profile image
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.

Collapse
deyrupak profile image
Rupak Dey Author

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 πŸ˜‚πŸ€£

Collapse
nikolab profile image
Nikola Betica

Was looking for this comment :)

Collapse
arberbr profile image
Arber Braja • Edited

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.

Collapse
deyrupak profile image
Rupak Dey Author

Agreed! πŸ™Œ

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Misusing 'px'

Using 'px'

Collapse
deyrupak profile image
Rupak Dey Author

Can't deny! πŸ˜‚