Selectors - The CSS - page 55

document, and in particular when JavaScript is used to alter the DOM
structure, the complexity and performance of selectors can be noticeable
when animating multiple items or doing other complex tasks.
If the document is using JavaScript to manipulate the DOM or
Ajax calls to add new content to the document after it loads, the
impact of complex selectors or changes far up the document tree may make
the speed of complex selectors more noticeable.
Selector Readability
Sometimes selectors or groups of selectors are chosen for their read-
ability and ease of scanning and visually chunking code in the style sheet
document. More verbose selectors can easily be read and matched to
elements in the HTML document structure. The following example takes
that to an extreme:
html body section article h1 {}
html body section article p {}
html body section article ul {}
html body section article ul.compact li {}
html body section#opener article h1 {}
html body sidebar form#newsletter fieldset label {}
Although it is clear how these selectors match to a given HTML DOM, the
selectors can be both slow and overly specific.
Selector Reusability
Keeping the pluses and minus of the other strategies in mind, it is often
useful to write complex selectors with an eye toward common markup
patterns and future reuse.