Remix.run Logo
cluckindan 5 days ago

This makes me confident that BEM-like classes are still the best approach for large and complex sites, as long as the .block__element--modifier pattern is followed, so there are no .block__element__secondelement type classes, and things like nesting, descendant selectors and :has() are avoided where possible.

Using custom tags invariably leads to the aforementioned, and browsers need to do extra DOM traversal to target styles properly. Not so with BEM: a flat list of class selectors maps cleanly to elements, so when the browser is parsing HTML to DOM, it doesn’t need to wait for all descendants to be parsed (for :has() to work) or do extra checks to determine whether its current path in the DOM matches a nested or descendant selector. It can just keep on parsing and rendering.

This may not feel like it makes a difference if you’re browsing the web on a veritable supercomputer, but for anyone on an older device, the difference will be between instant and kinda sluggish.