1. 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
  2. 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
  3. 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
  4. 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
  5. 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