Yes, that's exactly what I'm saying. You don't end up needing a semantic class like .widget since you likely already have a Widget component in your codebase. Essentially:

  .widget {
    border: 1px;
  }
  
  ...
  
  const Widget = () => (
    <div class="widget"></div>
  );

vs

  const Widget = () => (
    <div class="b1p"></div>
  );

You keep saying this is an abuse of CSS and that's not how it was meant to be used, but why is that so important?