CSS Hell

Collection of common CSS mistakes, and how to fix them

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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