DEV Community

Rupak Dey
Rupak Dey

Posted on

Ways to write BAD CSS

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! ๐Ÿ˜‚

Top comments (7)

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

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

Agreed! ๐Ÿ™Œ

Collapse
 
darkwiiplayer profile image
๐’ŽWii ๐Ÿณ๏ธโ€โšง๏ธ

Misusing 'px'

Using 'px'

Collapse
 
deyrupak profile image
Rupak Dey

Can't deny! ๐Ÿ˜‚