Der er et liv hinsides pixels og procenter. Ved brug af px enheder er fint i visse tilfælde, den virkelige fejl er at bruge absolutte i stedet for relative enheder.
p {
font-size: 16px;
line-height: 20px;
margin-bottom: 8px;
}Variable skrifttyper er fantastiske, men unødvendig brug af font-variation-settings vil i sidste ende bryde dine stile.
.bold {
font-variation-settings: 'wght'700;
}.italic {
font-variation-settings: 'ital'1;
}
Specificitet bestemmer, hvilken CSS-regel der anvendes af browserne. Udviklere skriver ofte alt for specifikke vælgere bare for at være 10000 % sikre på, at deres regler gør det regere.
div#my-popup div span.my-radiocheckbox-label-text {
color: #666;
}#some-id .label {
color: #111 !important;
}
Det er ikke en god tilgang at angive den primære skrifttype for næsten hver vælger, men alligevel støder jeg ofte på dette problem.
.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;
}
Browserleverandører tilføjer nogle gange præfikser til eksperimentelle eller ikke-standardiserede CSS-egenskaber og JavaScript API'er, så udviklere kan eksperimentere med nye ideer, mens de – i teorien – forhindrer deres eksperimenter i at blive påberåbt og derefter bryder webudvikleres kode under standardiseringsprocessen.
.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;
}
