Even Faster Web Sites

Chapter 14. Simplifying CSS Selectors

Much of this book focuses on JavaScript performance. What about CSS? Most published information about CSS understandably focuses on layout, design, and the relationship between content, markup, and code.^[72] There are a few best practices focused on CSS performance:

• Place stylesheets in the HEAD of the document to promote progressive rendering. (See High Performance Web Sites, Chapter 5.)

• Don’t use CSS expressions in Internet Explorer, as they may be executed thousands of times, resulting in a sluggish page. (See High Performance Web Sites, Chapter 7.)

• Avoid too much inline styling as it increases download size. (See Chapter 9 of this book.)

Another topic that has garnered attention is the cost of inefficient CSS selectors. A selector is the initial list of arguments that indicates the elements of the page to which a CSS rule applies. This chapter explains the issues with regard to CSS selectors. There are some surprises. Although following the guidelines for optimal CSS selectors can make a difference in web site speed, it’s more important that web developers avoid a few common, yet costly, CSS selector patterns. All of this is revealed in the sections that follow.

Types of Selectors

This section defines the terminology around CSS selectors. Consider this example:

#toc > LI { font-weight: bold; }

This is a style rule or simply rule. The CSS selector is #toc > LI. This selector contains two simple selectors (#toc and LI) that are joined with the >