Thanks for reaching out, Bhaskar!

This approach seems more levelled at CSS Modules than BEM. Which is an entirely different discussion :-).

As suggested in a previous message, using IDs in components is a bit of a red flag, as you can’t then have more than one component on the page.

Also this approach wouldn’t allow you to nest components without running into inheritance issues.

#component-one {
  span {
    font-weight: bold;
  }
}
#component-two {
  span {
    color: red;
  }
}
<div id="component-one">
  <span>Lorem ipsum</span>
  <div id="component-two">
    <span>Dolor sit amet</span>
  </div>
</div>

So in the above example, the second span would be bold which is not what you’d want in a component driven environment.