What are some of the "gotchas" for writing efficient CSS?
Firstly, understand that browsers match selectors from rightmost (the key selector) to left. Browsers filter out elements in the DOM according to the key selector, then traverse up their parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence, avoid using tag and universal selectors as key selectors — they match a large number of elements, and browsers will have to do more work determining if the parents match.
The BEM (Block Element Modifier) methodology recommends that everything has a single class, and that any needed hierarchy is baked into the name of the class. This naturally makes selectors efficient and easy to override.
Be aware of which CSS properties trigger reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.