Why is Facebook’s HTML + CSS Such a Mess?

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos.

Welcome to syntax. On this Monday, tasty treat. We're gonna be talking about, Hey. Did you see that that threads site? And they had they had 10,000 divs on that site. We're gonna be talking all about that. Why is Facebook's HTML and CSS such a mess. What is going on there? Do they need Marie Kondo to come in and spark some joy in here? What's going on there? My name is Scott rid. I'm a developer from Denver, and with me as always is Wes Bos.

Hey.

I am excited to talk about this.

So when threads launched, rid. I, I couldn't help myself but do a little inspect element. And, the the landing page, before it even launched, rid Had 13 divs just to do a full screen canvas, and I tweeted it out. And it got, like, half a 1000000 views, which bums me out Because it's so easy to be snarky and get a ton of, traction.

Whereas if you actually Spend a long time on, like, a tip or something. It will get maybe 10% of that.

But you knew what you were doing when you were tweeting out that Facebook

rid. Exactly.

So I did that. And then and then, like, people go, oh, LOL. Like, Facebook doesn't know what they're doing. And The reality is is obviously Facebook knows what they're doing. Obviously, there's a reason behind it. Obviously, there's very smart people that work there, and maybe that's that's not so obvious. But I thought, let's do a quick rundown. I've been curious about this forever as to, like, why When you view source on Instagram, Facebook, or now threads, why 2 things. Why is there so many divs? Why when they put, like, a A title that says your name. If you inspect element on, like, a post that you made and you inspect your name, there's probably 7 divs that wrap your name. And why? Rid. When you look at all the classes, how come the classes are all like x49 b j zed? And why do they do that? Rid. And I've asked around for people that work at Facebook quite a bit, and I never have gotten a straight answer.

So what we're going to attempt to do today is to break down why we think and how these things work. The CSS is a bit more known. Rid The divs sound easier. Yeah. I've got some I've got some sneaky suspicions on why none of the Facebook rid. Employees will ever say why they have so many divs.

Mhmm. So we'll we'll get into that as well. I think I'm right.

Yeah. I think yeah.

Well, okay. Well, let's, I guess, let's first start off talking about the, the CSS stuff because that is the the most cut and dry in terms of, Like, what's up with all them what's up with all them classes that are all jar jarbled or or just weird? Right? They're just strings of whatever. And this is a technique used for, rid Scoping, which, you know, so many things in CSS people make bigger deals of than they need to when it all comes down to scoping.

And the way this system works is it's very similar to something like styled components, which also gives your CSS random class names and so does Svelte.

Svelte by default in their scoped CSS. Each time you write CSS in a component, it's Mhmm. Scoped to that component and a bunch of random classes has been added to it. They do that because it generates a unique class so that way, any CSS that you write is scoped to that component. That that tight scoping is what allows people to build big systems without having to worry about, hey. I wrote this thing, and I'm worried that it's going to mess up somebody else's thing. Yeah. So I I don't I don't know what your background out there in radioland is like, but, me personally, I've worked on projects and teams when somebody overwrites your thing with a class that they didn't realize accidentally targeted the specificity of the thing that you were writing, and it goofed up. And next thing you know, rid. You have a dueling piano scenario where you're both writing CSS to try to override each other's CSS in a way that's, you know, cohesive or whatever. But So they use something called Stylex, which actually, Wes, I invite you to Google Stylex because when I Googled Stylex trying to find this, I landed on rid Really, key website for

office furniture.

So I'm gonna do some shopping over here at the Stylex store.

Rid Yeah. So I I dove into this pretty deep because if you click on a div, like I'm going rid to Instagram right now and I am clicking on a div with somebody's username in it. And it has probably rid Fifteen classes on it. They have, the first one they have is x r y x f n j.

And if you look at the CSS, it's applying overflow y visible.

That's it. One property, one value. Then they have another class For Align Content Stretch. And then they have another class and you think, oh, they have 1 class per Property value combination on there. That sounds a lot like that sounds like Tailwind where literally every single class you add to it rid is is, has its own property value, meaning that never do they have a class That is like dot post.

And then it says, like, background red, text align center, padding 20 p x.

Rid. They but they do author it. They so I I I watched a really good YouTube video from One of the devs at Facebook because there's not a lot of information out there on this thing called Stylex. If you Google it, it's office furniture.

If you look on npm, There is a package from Facebook that was published 9 months ago, but there's no corresponding GitHub repo out there. All there is rid Is this there's no docs for it at all, just a published package and 1 YouTube video from about two and a half years ago Saying it will be out later this year.

Mhmm.

So but I watched the YouTube video, and the way he explained it is it works very similar to creating groups of styles. So you might have like a post style and then You put 6 or 7 properties along with it, and then you might have, like, a post active style that you can sort of compose and add on. Okay. When it's active, we'll put a red border around it. And then what StyleX does so you still author it rid Both scoped as well as, you author it in, like, groups of styles that you're used to. But the StyleX machine We'll take all of the styles of the entire instagram.com and Generate unique class names for every single combination of, like, position static.

Text the line right. So it'll give you a generated class name for every single one of them. And I believe that they do that is because Facebook has so much CSS.

They it's not possible for them. Well, it is possible, but they could potentially being generating, like, 30, 50 gigs Not gigs. Thirty, 50 megs of CSS for the entire facebook.com, and then you gotta figure out where to load it on. So instead, what they do is they just rid comb through every single CSS file that every single component, and then they generate okay. Well, text align left. We use that here, But we also used it in 40 other properties, and it will replace that rid with that they have 1 class that's for text align left, and it will add it on to that div. And that's why a lot of these divs have rid. Five, 10, 15 different classes because it does that. And I guess at the end of the day, they just have 1 big CSS file or maybe rid. Several different CSS files that contain all of these different combinations. So if you're looking at it, you're like, oh, that's of mess. No. They're not actually writing the code like that. They're not even writing code like they are a tailwind. They're just applying Groups of CSS to it, and the tool will figure it out for you.

Yeah. And oftentimes, it's something to remember is when you're looking at source or any of that stuff, If it looks

weird, garbled, unreadable,

it's almost never somebody Writing like that unless they are just doing that for fun. Right? I mean, that there's almost always a process that's enabling that. So, like you mentioned, so this is kind of like styled components meets tailwind. It's like styled components with utility, atomic classes. So, Yeah, it's interesting that they

they figured out that that works the best for their system because they probably looked across their entire code base and said, rid Text the line left. Wow. We used that 80,000 times. Let's write 1 class for that. But instead of rid The author's writing t a l or or whatever the the atomic name of that CSS class would be.

I guess it is generated for them. And that I guess that also helps in avoiding naming collisions as well. Right? Like, if somebody in another part of Facebook creates A new helper class. Again, there's a possibility, globally, you could collide with those names. So now they're just generated for you.

Totally.

Another benefit of this approach is that it avoids all oh, my gosh. I'm gonna have to say it. It avoids all spec specificity Issues? No? Yeah. You you said You got it. Yeah. Specificity.

Specificity.

It avoids all specificity.

I said it. I'm cured. Rid. Well, you got it once out of the 4 tries, but you got it.

And the reason why it avoids that is because There are never any nested classes that apply to different things. You simply just have A class that applies color red, text align left, grid row 3, and It's applied directly to the class. So you sort of circumvent the whole cascade part of CSS there and just apply it directly to it.

A lot of people when I, like, posted it, a lot of people thought that the I was talking about the divs, but a lot of people thought that it was, Oh, the CSS. Like, how can you possibly write CSS like that? And a lot of people said, oh, that's for that's to prevent scraping and ad blockers, rid Because there was a famous post probably 4 or 5 years ago where Facebook would write the word advertisement.

Rid They would write an a, d, and then another span.

They they would like garble it into many divs And then hide and show and overlap with CSS so that it says the word advertisement.

And they were trying to rid Get around ad blockers because it's it's really easy to block an ad when the thing has a class of ad. Right? You could just say dot add display none.

Rid. I that's probably an added benefit of it, but I don't know that trying to circumvent, rid. Ad blockers is a reason. The other one was scraping.

This is similar to a reason, but not a reason for this. A nice reason. Rid Yeah. Maybe like, why do they give it x j 497 when they could programmatically generate,

Like, t a l for text line laugh. That's probably a good reason, I guess. It it actually just to give some some even Further elaboration on that because I think that does need some ad blockers. That's how they work. It's essentially, right, just putting display none on the things Based on a list of whatever classes in your CSS or whatever selectors are on popular websites denoting ads. But for the most part, a general purpose one is going to look at major ad serving, HTML tags And use those selectors to just display none on them. And typically, an ad blocker has, like, a way to say, oh, here's something I would like to block Custom on this page, and the way that works is it just gives you a little clicker when you click the thing. It grabs the selector for the thing you're clicking.

Rid Put the display none on there for you. That's ad blockers. It makes it really hard for scrapers as well. Rid. So I'm I tried my hand, the new tweet deck. They forced you into the new tweet deck, and it's I've got some issues with it. I'm rid I it used to be much worse, but now there's a couple things that are annoying. Especially, like, it tries to, like, throw tweets in your face that are not from a thread. So you click on a thread, and if there's you're at the end of the replies, it just says, like, discover And I hate that because it's you you reading it in context and they go, oh. So I was like, okay. Well, like, how can I hide these with, like, a Greasemonkey Extension? So there's and Twitter the same way. Twitter uses thing called React Native Web, and all of their classes are rid Programmatically generated. So it's not like you can grab on to something with a class of discover more because it's It's a random class name, and it's gonna change the next time they deploy a new version of Twitter.

So I had to resort to using have you ever used XPath re Selector? No. X so XPath is something that predates query selector, rid And it allows you it's like an XML based selector, and it allows you to select elements based on their text.

Rid. But it's JavaScript only. So what I did is I said, give me a div with the text of discover more rid and then go up 3 levels and add a class of discover more, and then I'm able to to select it. So it's really sometimes you can get You can get away with using the accessibility ARIA attributes because at a certain point they have to properly label it with ARIA attributes.

But if if that doesn't exist, then you have to select it based on the text and do a whole song and dance of Going up 3 level divs and they don't add another one.

You know what I I really like in this realm is Arc Has, Arc Browser. Yeah. Has boosts which are basically that thing where you can theme any website now. That's like their new feature to do that. But they just have a button called zap. So if you're working on you create create a new boost, then you click zap, and then you just click anything you want. And it's The same way as ad blocker, so it's probably classes based. So Yeah. You know, the stuff that you're talking about before might not apply. But I do like it To hide things quickly at a glance to say, like, alright. As part of this style or part of this website, I'm just gonna hide this stuff because I don't I don't wanna see it anymore.

Rid I love being able to customize website. It's it's something I miss when using the like the Twitter mobile app Because there's just little things. Like, the the scroll bars in the tweet deck are way too big. So I just It's Yeah. I got a lot of things to say about the new tweet deck, but I'm not too.

Rid. So that's why the CSS looks that way. And then the other question is, why are there so many divs? Rid. Why why do you need 13 divs to center something? Why do you need 3rd 7 divs to display somebody's name on Facebook? Rid. It seems pretty crazy. And I wrote here, well, devs are free, but that's not true, is it? You actually I gotta say, rid. I wrote that. I'm gonna say that. Oh, I I was gonna say the same thing. Like, they've they're I think I've said it in the on the podcast before. Like, they're You don't pay for divs, really, but you kinda do. How do you how do you pay for divs?

Well, I mean, it's bytes. I mean, it's text to the page. Yeah. The page has to Structure the the parser has to understand that there's a container here. But, you know, the reason why I say that it's it's not a huge deal doesn't really Our divs aren't going to sink your ship. And having, you know, a ton of divs, for the most part, it's only gonna make it harder to style with CSS. But as long as it works Within the Stylex system for how they do it, then that's probably less of an issue.

My ex I I don't know your experiences with large amounts of divs, but For me, I like, puts me back into the Drupal world where Drupal adds a div into everything. And then there's sometimes there's like 4 or 5 divs and, like, Targeting things is super hard because some of them don't have classes.

So to me, devs have always only been a major pain When there's a ton of them and you don't have access to each one individually.

But when you have a lot of devs and you have access to each one, then It's not really a problem.

I have run into on I I talked about on the users. Tech website when I moved it, rid I moved it over to Remix.

Mhmm. I was there's, like, 25,000 spans on the home page, And it was it was chugging to render the entire thing because that's a lot of dibs. At a certain point, it is too much dibs old you think? HTML. It was it was the spans.

And the the solution to that is you only render the ones that are in the visible, rid Like in the viewport rather than the entire page. Mhmm. Because it's the browser rendering engine has to loop over all of it. And I'm sure rid Facebook and Instagram get around this by just rendering it on demand as you scroll through the thing. They're not rendering a list of Like in my case, I was rendering I had 800 people and every single person had a square. So I was rendering 800 divs.

Inside of that, you had an image, a link, an emoji, a URL, a description Since he liked that one to me still. Every single person. It's rid It's a lot. And there was I think even Chrome Firefox DevTools said or maybe it was Web page speed test? It says you've exceeded 20,000 elements or Oh, I see. Yeah. Elements on the page.

20,000 calls. Story. Yeah.

Let me hold on. Let me do document dot query selector and see how many.

It's like you, sir, have been

rid diagnosed with DIVIDUS. You have too many divs. So there is 3,300 Spans on the page.

And here we go. 22,062 elements on the page, and it's too much. It's too much. Especially maybe maybe though that was because I was applying CSS to all of them. You know, like for a lot of Facebook stuff, they're nesting 9 divs, but they're not applying CSS to every single one. They're all usually only applying CSS to one of them, which that that begs the question, why rid. Yeah.

What's going on with all these divs? Why do you have so many divs? So the answer to that is we don't know, but here is what I can rid Figure out from getting into it. So first of all, if you look at the React Dev Tools and you flip between the Inspector tab and the dev tools tab, a lot of those divs are only there because they are providers for rid Your React components. So they need to wrap a component in 7 or 8 different providers So that that component has access to the data that it needs.

And in order for it to be on the page, I guess, they do need to render out An element. It it that isn't always the case. Right? In in Reactland, it doesn't have to actually render out a div,

But No. It never did for me.

But I so I guess that's the the first one. There's a lot of them are providers. The second one in here, This is it. This is why I think it's Facebook is tracking everything.

So if you take a look With Facebook? Are you sure? That company, they're they're pretty known for us.

Not tracking anything. They are

tracking everything, and A lot of those divs that don't aren't associated with a provider, they all have event handlers attached to them, rid. Meaning that every single time you hover over top of something, every single time you long press something, rid every time a lot of the things on Facebook, if you hover over top of it, it pops up a little like a hover intent, like a card that will show you the person's profile or it'll pop up a little bit of information about the user if they're online or rid or something like that, or or I'll give you a bit little tooltip of some information.

So Facebook needs to both render out that card As well as they are literally tracking okay. Did you hover over the person's first name or their last name? Did you hover over top of their icon? Rid Did you hover over top of 3 dots? That's beside it.

And they're attaching event handlers to a lot of them. If you if you take a look at The React props on a lot of these, it's all event handlers. So my theory I don't know if this is true.

The reason why every time I ask somebody that works on Facebook is why do you have so many diz and they say I don't know is because they're tracking

everything that you do. Everything. Yeah. Yeah. And and you also I mean, like you said, with the other stuff to deter scraping and ad blockers, I I would imagine that has to some Do something with it too. I mean, it it's probably just a a PIA for anybody riding a scraper to have to deal with that many descendants of anything to having to Actually, get HTML content. I mean, especially if it changes or whatever. Who knows? Right? I don't I don't know if it's changing or whatever. But You'd have to imagine it is, like you said, probably not for The the best of reasons. Like, oh, this is faster or whatever. No. It's probably not for for those reasons. But yeah.

I've posted maybe we'll try to get the screenshot in the show notes, but I inspected Element on one of the person's names on Facebook, rid And it has props, children, display inline, and then this one, trigger analytics context post underscore owner user ID 49 blah blah blah. So it's telling trigger analytics, somebody hovered over top of this user. So that goes into the machine and tells them more information about The type of stuff you're interested, not until you click it, but literally when you hover over top of it or mouse over or as soon as it's rendered into the viewport that Triggers something else,

as well. Oh, I was gonna say I found I found a trigger analytics contest context that was, user spoke about wanting, rid something while his phone was shut off. That's what Bill meant.

People always say that your Instagram is, like, serving up ads for whatever you were talking about. Right? It's it's true. They

They're always listening.

I also wonder if a lot of the issues here are rid There's many teams. There's many different providers in Facebook.

And, again, I wonder why you couldn't rid Throw that all that functionality into a custom hook.

But maybe they it's a lot easier for them to just have a dedicated div on the page Where that piece of functionality can live and and instead of throwing it into a hook and having to associate it with another element on the page. It's all componentized. Right?

I mean, it's the same thing that we talk about with components, CSS, scoping, whatever. It's all Scoping for most likely whatever team they're working in, whatever things that you don't the last thing you want is to introduce bugs into to Facebook.

Rid I have another screenshot here of somebody's name again. I think it's hilarious to use the name as an example because you think, oh, rid render somebody's name to the page. Maybe it's just an anchor link.

But this one is has Polaris user hover card container rid dot react. So the Polaris is probably their design system or something like that. Right? Hover card container. Then they have a suspense, so, oh, they gotta do server rendering. Okay. Or or maybe you have to wait until the whole everything inside of that is fetched its specific data. Then you have hover card implementation, then you have, rid A provider below that and then another hover card, and then there is a Polaris user link, but then there is a Polaris user fast link. So they probably render out An anchor link, but then they have another div or something that listens for a click on that span. And If JavaScript is enabled, it's no longer a link. It's a fast link. Right? It probably loads up the page. Or as soon as you hover over top of it, rid Start preloading the next user profile in the image on that page. Right? There's so much that goes into Facebook in making it fast and performant as well.

So, again, another reason to throw more dibs on the page. Yeah. Very fascinating. And and this actually no. I do wanna say this illustrates a great point overall with Is that you out there, if you have React knowledge, introductory, intermediate React knowledge, you can Install the React Dev Tools. You can go to any site that's built in React and typically, unless they're installing something to block that, you can paw around And really gain a lot of knowledge from whatever their implementation is. You can see how people are building their sites.

Rid. View source.

Not just View source though. React dev tools tells you a massive amount about an application.

Even if they do block it, rid. You can literally go to any div in dev tools, click it, then go to your console and write dollar 0. Rid Dollar 0 in console will give you the currently selected element, and then you say dollar 0 dot underscore underscore React Fiber. Rid And then on that, it'll start to auto complete some generic React Fiber c 19 h HXM rid That will give you the opt the React object itself, and it will tell you what the children are.

Sometimes, you'll find some rid state in there. You'll often see the props in there.

In in my case, I found a bunch of the x state rid Original, the original authored value. And it was really cool because, again, you you inspect element on something, and you only see the rid. Goog classes that are generated.

But I forget how I found it, but I was poking around in there, and I found, like, an x date rid Xstyle

Stylex? Stylex, not X. Stylex, not X. Yeah. Stylex.

X data is something totally different.

Rid But, basically, I found the original authored styles in there, and it was kinda cool to see how they were authored versus how they were rendered out. So Dipping into React just via straight up, element properties rid It's certainly a way you can do it as well if the dev tools are off. Even on threads, the dev tools would just crash because it was rid So such a massive application.

There was there was no way to sorta dip into it.

Yeah. Word.

Rid oh, last thing I had here was a lot of these are also because of React Native. So if you if you need a component to render to React Native, rid As well as to the web, sometimes you have to add a couple extra divs or or elements in there so that they render exact same on both,

both of those platforms. Yeah. That's a whole thing. React Native Web is a lot more fascinating. Remember, we talked to

rid Nate from Tamagoi.

Yeah. We talked to Nate from Tamagoi about React Native Web, and it's one of those I I do wonder, you know, with threads, they clearly need a web presence. That's like a huge problem. And, rid. You know, you gotta wonder, like, why Instagram has always been garbage on the web and why Instagram has always been garbage on the iPad. Like, they only care about The mobile phone experience, but I don't think that's going to work with threads. If you're trying to build a Twitter competitor, you need a desktop experience. Rid. I wonder if they'll use React Native Web for that. I I have no idea. Yeah. It it looks like they already are. If you there is a couple

rid views that are on the web, and it it's bang on. Oh, yeah. Right? Yeah. With your last name. Yeah. Yeah. But that's it. There's not like, you can't do anything. You can just view a view a thread and and embed a a tweet or embed a tweet.

Rid Hopefully, they they roll that out. Lots of dips. Alright. That's it for today. Thanks, everybody, for tuning in. We'll catch you later.

Head

on over to syntax.fm for a full archive of all of our shows. Rid And don't forget to subscribe in your podcast player or drop a review if you like this show.