CSS Hell – To Hell with bad CSS!

There is a life beyond pixels and percentages. Using px units is fine in certain cases, the real mistake is using absolute instead of relative units.

p {font-size: 16px;line-height: 20px;margin-bottom: 8px;}

Check out what is going on here ⇸

Variable fonts are awesome, but unnecessary usage of font-variation-settings will eventually break your styles.

.bold {font-variation-settings: ‘wght’700;}.italic {font-variation-settings: ‘ital’1;}

Check out what is going on here ⇸

Specificity determines, which CSS rule is applied by the browsers. Developers often write overly specific selectors just to be 10000% sure their rules will rule.

div#my-popup div span.my-radiocheckbox-label-text {color: #666;}#some-id .label {color: #111 !important;}

Check out what is going on here ⇸

Specifying the primary font for almost every selector is not a good approach, yet I often run into this issue.

.my-class-1 {font-family: Roboto;}.my-class-2 {font-family: Roboto;}p {font-family: Roboto;}.my-class-3 {font-family: Roboto;}footer {font-family: Roboto;}

Check out what is going on here ⇸

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while — in theory — preventing their experiments from being relied upon and then breaking web developers’ code during the standardization process.

.my-class {-webkit-transition: left 400ms ease-out;-webkit-transition: left 400ms ease-out;-moz-transition: left 400ms ease-out;-ms-transition: left 400ms ease-out;-o-transition: left 400ms ease-out;transition: left 400ms ease-out;}

Check out what is going on here ⇸

Typed at

Share your love

Leave a Reply