Cascading Style Sheets (CSS) can be described as a style sheet language written in a markup language. It is used for defining the look and formatting elements of Web documents such as the layout, colors, and fonts. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Even though every browser supports CSS, there are many inconsistencies in the supported specification version. Some browsers even have their own implementation of the specification and have proprietary (vendor) prefixes. Supporting all modern browsers is a daunting task, not to mention when developers need to support old and legacy browsers.

All these problems cause a lot of trouble for developers, and it is hard for them to write CSS code that will render consistently across all browsers. That’s why we want our top CSS developers and engineers to share their knowledge and offer their best tips to achieve those tasks more easily.

How to Improve CSS Performance

There is a lot you can do to ensure good CSS performance and reduce page loading times. Here are some tips and techniques you can start implementing today.

A browser needs to go through every single DOM element to find what it is looking for. Take this example:

.home-page .header-main .nav-main ul 

The browser will begin by looking for every ul element, then every .nav-main inside of a ul, then every .header-main inside of that, and then every .home-page inside of that. Only when the search is done are styles applied. We can be far more efficient than that and write a specific selector, like this:

.nav-list 

Now the browser simply needs to find the .nav-list element and apply the styles to it. We have kept specificity low and avoided unnecessary nesting. Simple, yet efficient.

Naming classes can be tough, but you can use some of the well known tricks for that. For instance, in our .nav-list element, you can use the .component-descendant-descendant naming:

.nav-list-item

The .nav-list-item would be the list item in the navigation. Alternatively, you can use the BEM naming methodology, already covered in our CSS tips.

Another piece of advice for keeping low specificity is to avoid IDs and use classes. The big benefit of using classes is that you can reuse your styles and help keep your style sheets DRY (Don’t Repeat Yourself), which will also reduce the file size.

In the end, you can minimize the CSS to make it load faster.

Source: toptal.com/css/tips-and-practices