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;
    }
    Check out what is going on here
  2. 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
  3. 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
  4. Link & the forgotten accessibility

    One of the most common mistakes: setting a color for a link, but not adding :hover, :focus and :active states.

    a {
    color: #ca0000;
    text-decoration: none;
    }

    /* And that is the end of link styling */
    Check out what is going on here
  5. z-index hell

    z-index is something that can measure one's frustration. The amount of digits represent the fact that the developer tried to position the div above the content, but failed miserably.

    .my-class {
    z-index: 122828282882;
    }
    Check out what is going on here