Why Twitter’s DOM Looks the Way It Does
Developers who learned HTML in the era of hand-written markup often hold up “clean” code as an ideal: semantic tags, minimal nesting, readable class names. Much of that ethos is still valid for small sites and teaching contexts. But when you inspect the DOM of a large-scale application like Twitter, you’re likely to find something very different — a sea of <div> elements with cryptic classes and roles peppered throughout.
At first glance, this looks like a textbook case of “divitis” and poor craftsmanship. The reality is more nuanced. Much of that output comes from React Native for Web, a framework that provides cross-platform primitives for building touch-friendly web applications. As Giuseppe Gurgone explains in a deep dive on Twitter’s HTML, the framework normalizes inconsistencies across platforms to deliver a consistent experience. What looks like messy markup is actually a deliberate product of that system.
It’s Not About Looking Clean
The <div role="button"> patterns exist to overcome cross-platform styling limitations, not to ignore semantics. The odd class names come from a styling framework designed for CSS scoping. Crucially, this DOM still produces an accessibility tree that is functional and expected by assistive technologies. So while the markup may not be beautiful in the classical sense, it serves its purpose: a usable, accessible, performant web application.
None of this means the approach is beyond criticism. Robotic class names make it hard for users to write custom stylesheets for accessibility. Superfluous divs add weight to the DOM. And without sourcemaps, this kind of output is difficult for newcomers to learn from. These are legitimate concerns worth debating.
But the core lesson stands: seeing a bunch of divs with auto-generated class names does not automatically signal bad code. Many modern frameworks ship their own idiosyncratic HTML, almost always in service of making the site function better, not in service of readability or pedagogy. Expecting production markup at Twitter’s scale to resemble a well-formatted tutorial snippet is a category error.
