Write Efficient CSS, save Browser’s efforts, optimize for speed. Write clean, semantic html with well organised, maintainable CSS. Important principles and more.

The presentation, content, and behavior should always be separate. These should exist and maintained individually. Your markup should be well-formed, it should be semantically correct and it should be generally valid. Presentation and layouts should never depend upon JavaScript. JS should just progressively enhance the experience. And Yes, inefficient css can reduce the page speed and performance. These are the points that matter after the css file is downloaded and when the browser starts working:

  • The elements of our markup should render in a flow, automatically. Writing html and css can be visualized as putting together the pieces of a puzzle, one by one, in the flow. Always keep in mind, the final pixel perfect image you need to produce, keep that open in a different window.
  • Understand cascading and selector specificity so that you can write more terse and effective code. Thoroughly understand how browser evaluates and discards the rules one by one, in order to find the final rule to apply.
  • Write selectors that are optimized for speed. Where possible, avoid expensive CSS selectors.
    • For example, avoid the * wildcard selector.
    • Don not qualify ID selectors ( e.g. div#container )
    • Don not qualify class selectors ( e.g. h1.page-title )
    • These are especially important with web applications where speed is paramount and there can be thousands or even tens of thousands of DOM elements. The browser will just cry while applying your css.
  • Reduce efforts of browser. Less complex rules, less efforts by browser, lesser time it takes in evaluating and rendering, increased performance and speed.
    • Alphabetize, as much as possible, but not 100%. Mix it with grouping similar properties together, ordering them logically within each grouping.
    • Alphabetizing also improves the css compression and gzipping.
    • For the repeating images, always make it larger than 1×1 pixels. Suppose we take a 10px image instead of 1px image. For repeating it, browser will now work Only 100 times, instead of 1000 times. Awesome !!
    • Rely on inheritance, avoid duplicate rules. For e.g. if the main div is already text aligned center, just to be double sure, do not repeat the style on any child element. Don’t do that.
    • The fewer rules required to check for a given element, the faster style resolution will be. This is the key to dramatically increasing performance. For example, if an element has an ID, then only ID rules that match the element’s ID will be checked. Only Class Rules for a class found on the element will be checked. Only Tag Rules that match the tag will be checked. Universal Rules will always be checked.
    • Another major cause of slowdown is too many rules in the tag category. By adding classes directly to our elements, we can further subdivide these rules into Class Categories, which eliminates time spent trying to match rules for a given tag. For e.g. use direct classes like .sublist-content in place of .post > ul > li > ul
    • Avoid directly using tag selectors, especially in the descendant selector, in the Universal Category, in the child selector. In the examples below, for the first one, every p of the dom will be checked if its parent have class post or not. This last one is purely fatal.
      /* Some examples of most expensive rules are: */
      .post p { line-height: 1.4; }
      p .strike { text-decoration: line-through; }
      .sidebar > * { margin-left: 1.2em; }
      
  • Use ID selected rules only if the element is unique visually. ID selected rules should be avoided, as much as possible. ID selected rules completely lack reusability. If you are not 100% sure, go for a class immediately.
  • Using a more intelligent naming convention. For e.g., a class name of blue-btn-large for a special button on a page is quite meaningless if it has been changed to have a red color. The class name of special-btn is still better because when the visual style changes, it still makes sense.
  • Make more use of Combinators and Attribute selectors. Combinators provide shortcuts for selecting elements that are a descendant element, a child element, or an element’s sibling. Attribute Selectors are great for finding elements that have a specific attribute and/or specific value. Knowledge of regular expressions helps more with attribute selectors.
  • Using !important overrides all specificity no matter how high it is. We should avoid using it for this reason. Most of the time it is not necessary. Even if you need to override a selector in a stylesheet you don’t have access to, there are usually ways to override it without using !important. Avoid using it and it is possible.
  • In general, CSS shorthand is preferred because of its terseness, and the ability to later go back and add in values that are already present, such as the case with margin and padding. We should be aware of the TRBL acronym, denoting the order in which the sides of an element are defined, in a clock-wise manner: Top, Right, Bottom, Left. If bottom is undefined, it inherits its value from top. Likewise, if left is undefined, it inherits its value from right. If only the top value is defined, all sides inherit from that one declaration.
  • Define default styling for h1 - h6 headings including headings as links. It’s helpful to declare these at the top of your CSS document, and modify them when necessary. This maintains more consistency across the site.
  • Also try to create classes like .h1, .h2, .h3, .h4, .h5, .h6 . These come in handy in cases like your heading is third heading visually but needs to be an h2 for better seo. We can then write:
    <h2 class="h3">This heading is third heading visually, but needs to be an h2 for better seo</h2>
    

 

These are the points I listed down today, will be updating/extending this list soon. Please add your suggestions in the comments   🙂

 

Leave a Reply

  • (will not be published)