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;
}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;
}
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;
}
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;
}
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;
}
