-
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
pxunits 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;
} -
font-variation-misfortune
Variable fonts are awesome, but unnecessary usage of
font-variation-settingswill eventually break your styles..bold {
font-variation-settings: 'wght'700;
}
.italic {
font-variation-settings: 'ital'1;
} -
Overspecified specificity
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;
} -
font-family everywhere!
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;
}