Question

According to mdn :

The descendant selector is the most expensive selector in CSS. It is
dreadfully expensive—especially if the selector is in the Tag or
Universal Category.

When Modernizr is up , it adds all the non supported classes to the html tag.

Meaning he can later do :

.myNotSupportedClass .myLastDiv   <-- notice descendants selecotr[ ]
{
  color:red;
}

But this is absolutely slow operation an operation which can be optimized…. which has to go through all the DOM tree in order to find the div.
I know there isn’t another way of doing it , but still :

1) they could have added those classes to the body/form which is closer to the elements. soo there will be less of searching.

Or am I wrong …,?

Answer 1

But this is absolutely slow operation

Eh.

they could have added those classes to the body/form which is closer to the elements. soo there will be less of searching.

body: how much less searching? 1 level less? How much of a difference does that make?

form: not every page has a form, and pages can have more than one form. The form element itself can be placed anywhere in the page body too, so the elements that should be affected by selectors in Modernizr class context may very well be unrelated to it, making searching completely impossible.

Do whatever you like, but since Modernizr chooses to place classes on the html element, write contextual selectors that make use of those classes and the descendant selector. If you’re that obsessive about descendant selector performance, you have the choice not to use Modernizr and lose all the feature detection goodness it brings.

Why it chooses to place classes on the html element is anybody’s guess. It could have been the most convenient element to place them on.