1. content is your Content?

    I saw a developer using the content property for adding extra text to a label, because why not, he said. Sadly, this raises several issues.

    .label::after {
    content: "My label";
    }
    Check out what is going on here
  2. One size should fit all?

    In modern web development, there is less and less reason to use fix sizing for an element, especially when it's a content wrapper.

    .wrapper {
    height: 800px;
    width: 1024px;
    }
    Check out what is going on here
  3. We don't float down here anymore

    I just realised I can't tell when was the last time I used the float property. There are so many other ways to align items without any fuss!

    .sidebar {
    float: right;
    }
    Check out what is going on here
  4. Convenient CSS naming conventions

    I often run into the problem where I see the same class name being reused on different parts and context of the website, but when 1 out of the 3 properties don't match with the design, developers just use inline styling to override the desired rule.

    .primary-text {
    color: #000;
    font-family: "Open Sans";
    line-height: 1.2;
    }
    Check out what is going on here
  5. 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