-
content is your Content?
I saw a developer using the
content
property for adding extra text to a label, because why not, he said. Sadly, this raises several issues..label::after {
content: "My label";
} -
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;
} -
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;
} -
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;
} -
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;
}