Hands-On Data Structures and Algorithms with JavaScript

Avoiding complex CSS selectors

Whenever you are creating your CSS styles, it is imperative to understand that there is a cost associated with the browser to apply these styles to any element. We can analyze our CSS selectors the same way we do our JavaScript and come up with the best and worst case runtime performance of each of the styles we apply.

For instance, consider that we have a style as follows:

.my-class > div > ul.other-class .item:nth-child(3) {

The complexity of this would be much higher than simply creating a class and assigning it directly to the element itself:

.my-class-child {

Our browser no longer has to check whether each and every element falls into the hierarchy of the style defined previously. A technique developed ...