4

CSS Hell - To Hell with bad CSS!

 3 years ago
source link: https://csshell.dev/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
To Hell with bad CSS!
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;
    }

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

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

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

  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 */

Made with love by @cat_a_flame - csshell.dev © 2021

Inspired by HTMHell 🔥


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK