1. 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
  2. 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
  3. 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;
    }
    Check out what is going on here
  4. 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;
    }
    Check out what is going on here
  5. Prefix mess

    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;
    /* older webkit */
    -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;
    }
    Check out what is going on here