Bunch of CSS Best Practices

Bunch of CSS Best Practices

In this blog post I will do my best and try to cover many of the CSS best practices I learned and used throughout all my projects and at work, as well.

Though CSS is an old web standard, I still see these days a lot of ‘bad’ code written, either in the form of an antipattern for the DRY (Don’t Repeat Yourself) principle or in the form of over-abusing CSS classes, rules or properties.

A lot of this ‘bad’ CSS code results from the fact that our HTML structure is not made properly from the very beginning, by not keeping semanticsflexibility and extensibility in mind and only creating layouts and interfaces with only our predefined necessity from that moment in mind, never thinking we might need to extend our work at some point in the future.

I will soon write a blog post in where I will treat the subject of writing semantic and flexible HTML code, but for now, let’s see what CSS best practices we can adopt to improve our coding:

  • make use of specificity when you want to overwrite or change the inheritance priorities over certain properties of certain rules, do not use the !important flag; Ex.: .high-specificity-element .element-i-want-to-have-higher-priorityDO NOT USE .element-i-want-to-have-higher-priority { property: value !important; };
  • group your CSS rules under various categories, in order to keep them organised;
  • do not use a long chain of element(s) targeting; Ex.: .framework .parent-class .direct-children-class .child-class, only when is really necessary;
  • use shorthand properties as much as you can, such as marginpaddingbackground, etc; only use specific CSS properties when you want to overwrite properties in your base element; Ex.: the left margin of .my-base-class { margin: 0 1.5em; } can be overwritten by using the margin-left property, like this: .my-base-class.custom-class { margin-left: 1em; }; we now overwritten our margin-left property for our custom-class element, which changes a bit the behavior of our base element my-base-class, but we didn’t touch the default behavior of our base element;
  • try to avoid as much as you can using the * selector (use it in your resetting styles for generic uses only), since it will trigger a lot of search iterations into your DOM and will affect performance, especially for big codebases;
  • do not style elements by targeting their ID’s; the ID’s are meant to be used just as identifiers, mostly to help JavaScript in manipulating stuff around; the best way you can use ID’s in your CSS code is to increase specificity for some of your child elements (nodes); you can, however, style elements with ID’s which are part of your main layout, such as #main-header#main-footer, and so on, but limit yourself only to these ones;
  • create a high-order writing system for your CSS properties, grouping them nicely in categories, like this:
.my-element { 
    /* Layout Properties */
    display: block;
    margin: 0;
    padding: 0;

    /* Positioning */
    position: absolute;
    left: 0;
    top: auto;

    /* Text Manipulations */
    text-align: left;
    font-size: 150%;
    white-space: nowrap;

    /* Colors */
    color: #fff;
    background-color: #000;

    /* CSS3 Properties */
    border-radius: 5em;
    text-shadow: 0 0.0833em 0 #fff;

This way, you will have your CSS properties organised in family groups and in a way that’s easier to read, also;

As I told you before, a lot of the CSS good practices depend a lot of how you write HTML, as well. That’s why I invite you to read my upcoming blog post on “how to write good HTML code” to better understand the close relationships between HTML and CSS.

Post Comment