Hacker News Reader

Comment by grandalf | Hacker News Reader

I like the feature of assessing slow CSS. I'd never realized that constructs like the following would be "very inefficient":

  #foo p span{
    color: #fff;
  }

View on HN

i read it, but still have to ask why ?

why they're inefficient?

it's inefficient because the browser has to search/loop through the DOM looking for the exact pattern of the corresponding css rules, instead of a direct pointer like:

#my_foo_span{ color:#fff }.

but they mean different things. one says, all spans which are descendants of divs which are descendants of some elements with id=foo. the other says one element with id=my_foo_span. duplicating rules in CSS to match overly specific IDs defeats one of its major advantages.

one thing I don't understand is, does that mean it's bad CSS style? Is doing the suggested optimization equivalent to writing really huge functions in c before compilers could inline?

Reply on news.ycombinator.com