What do you mean by 'worse is good'? Remember the 'separation of concerns' wrt HTML/CSS was at a time when JSX, lit-html, web components et al did not exist. There was no easy way on the front end to do something like this:

    function PrimaryHeader({children}){
        return <h1 className="text-red-500">{children}</h1>
    }

    <PrimaryHeader>...</PrimaryHeader>

Thus, the 'separation of concerns' and many thousands of hours of developer toil ensued to both completely separate, yet still closely bind, style to markup by way of class names. There's no point to have a .PrimaryHeader class in a world of web components and atomic CSS (Tachyons, Tailwind, etc.)

Even absent of an atomic CSS library, I still prefer inline CSS to making up arbitrary class names; my entire codebase can be JSX files, and every component is self encapsulating. I don't see this as 'worse' in any way.