i read it, but still have to ask why ?

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?

why they're inefficient?