Should CSS styles be constrained by ancestor id?

Question

css

There is a web page that has a dozen or two view styles

#turns li.event-nextRound {
  text-align: center;
  font-weight: bold;
}

In other words:

• The styled elements are inside the element with id="turns".
  
• #turns contains about 100-200 child elements, both immediate children and nested children.
  
• These element classes do not occur outside of #turns.
  

Question #1: Will there be a rendering speed gain if I remove #turns from the selector?
On the one hand, these styles can potentially be applied to any page elements.
On the other hand, for each matching element, the browser doesn't have to check to see if it's actually a child of #turns.

Question #2: Is there an easy way to measure rendering speed so I can decide for myself if there is an effect?

Answer 1

You can notice a significant difference in rendering speed only on a Pentium 200 without mmx. In other cases, this is the last thing to optimize, since the nesting depth of the tree house has more influence than how certain styles will be set.

Answer 2

Which styles you write to a selector affects performance, but to which selector it doesn't. If you care about readability - use preprocessors and methodology. Don't like BEM? Look towards AtomicCSS (tailwind and stuff)