To Hell with bad CSS! | CSS Hell

One size should fit all?

In modern web development, there is less and less reason to use fix sizing for an element, especially when it's a content wrapper.
```
.wrapper {
  height: 800px;
  width: 1024px;
}
```
Check out what is going on here
We don't float down here anymore

I just realised I can't tell when was the last time I used the float property. There are so many other ways to align items without any fuss!
```
.sidebar {
  float: right;
}
```
Check out what is going on here
Convenient CSS naming conventions

I often run into the problem where I see the same class name being reused on different parts and context of the website, but when 1 out of the 3 properties don't match with the design, developers just use inline styling to override the desired rule.
```
.primary-text {
  color: #000;
  font-family: "Open Sans";
  line-height: 1.2;
}
```
Check out what is going on here
Let's talk about units

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
font-variation-misfortune

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