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

everything.

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

it pops up a little

display inline, and then this one, trigger analytics context post underscore owner user ID 49 blah blah blah. So it's telling 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.

divs.

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

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 and they go, oh. So I was like, okay. Well, like, how can I hide these with, like, a Greasemonkey Saying it will be out later this year.

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.

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

rid every time a lot of the things on Facebook, if you hover over top of it,

I've posted maybe we'll try to get the screenshot in the show notes, to a lot of them. If you if you take a look at that 25,000 So such a massive application.

trigger analytics, somebody hovered over top of this user. So that goes into the machine and tells them more information about in Reactland, it doesn't have to actually render out padding 20 p x.

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, Sometimes, you'll find some rid state in there. You'll often see the props in there.

But No. It never did for me.

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

And they're attaching event handlers There are that listens for a click on that span. And If JavaScript is enabled, So Head if somebody in another part of Facebook creates

a div, then you have, is 3,300 really, but you kinda do. How do you how do you pay for divs? been curious about this forever for people that work at Facebook quite a bit, 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 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 unique class names for every single combination 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,

for But if if that doesn't exist,

that every single time

maybe though that was because I was applying CSS to all of them. You know, like for a lot of Facebook stuff, Specificity.

as well. Oh, I was gonna say I found I found a trigger analytics contest bugs into to Facebook.

less of an issue.

Not tracking anything. They are

maybe and 1 YouTube video an added benefit of it, but I don't know that it's Facebook is tracking You don't pay for divs, I also wonder if Dipping into React

anybody riding a scraper to have to deal with that many descendants of anything to having to Actually,

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

spans on the home page, And it was it was chugging to the web, A class that applies color red, text align left, 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

elements I have run into on I I talked about on the users. Tech website when I moved it,

20,000 calls. Story. Yeah.

is you only render the ones that are in the visible, A lot of those divs that don't aren't associated with a provider,

Rid Did you hover over top of 3 dots? That's beside it.

Inside of that, you had an image, a link, an emoji, 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 A provider below that and then another hover card, and then there is a Polaris user link, React Fiber 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.

why rid. Yeah.

get around this by just rendering it on demand as you scroll through the thing. They're not rendering a list of and Remix.

So that that component has access to the data that it needs.

but I inspected Element on one of the person's names on Facebook, rid And it has props, children,

You'd have to imagine it is, like you said,

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 code like they are a tailwind. They're just applying rid. Ad blockers is a reason. The other one was scraping.

probably not for

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.

rid There's many teams. There's many rid That will give you b j zed? to creating

And really gain a lot of knowledge from whatever their implementation is. You can see how people are building their sites.

the original authored value. And it was really cool because, again, you you inspect element on something, and you only see the Totally.

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

the issues here are take all of the styles of the entire machine

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

rid

can live 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 rid Your React components. So

Rid But, basically, I found the original authored styles in there, and it was kinda cool to see per or maybe it was Web page speed test? It says you've exceeded 20,000 but then there is a Polaris user fast link. So they probably render out An anchor link, but then they have another div on the page, and it's too much. It's too much. Especially

React knowledge,

the dev tools would just crash because it was rid because it's It's a random class name, and it's gonna change the next time they deploy a new version of Twitter.

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

unless they're installing something to block that, you can paw around

And, rid Xstyle In in my case, and then they generate okay. Well, text align left. We use that here, But we also used it in 40 other 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

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

Where that piece of functionality

c 19 h HXM that begs the question, then you have to

user spoke about wanting,

Yeah. Word.

for a full archive of all of our shows. Rid And don't forget to subscribe in your podcast player

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, why you hover over top of something, every single time you long press something, There is a package from Facebook they figured out that grid row 3, and 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? So I had to resort to using have you ever used XPath 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 rid Facebook and Instagram 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 And the reason why it avoids that is because how they were authored versus how they were rendered out. So they need to wrap a component in 7 or 8 different providers 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 rid. Several different CSS files has its own property value, meaning that never So I'm gonna do some shopping over here at the Stylex store.

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.

sometimes you have to add a couple extra divs or or elements in there so that they render exact same on both, Even if they do block it, rid. You can literally go to any div in dev tools, of some information.

the opt the React object itself, and it will tell you what the children are.

with threads. If you're trying to build a Twitter competitor,

rid Nate from Tamagoi.

element properties

or drop a review if you like this show.

introductory, intermediate React knowledge, you can Install the React Dev Tools. You can go to any site that's built in React and typically,

I found a bunch of the x state

Rid. View source.

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 It's like you, sir, have been

rid views Hey.

and then you say dollar 0 dot underscore underscore Mhmm. I was there's, like, They're always listening.

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

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

click it, then go to your console and write dollar 0. Rid Dollar 0 in console will give you the currently selected element, 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.

React Fiber. Rid And then on that, it'll start to auto complete some generic 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? overflow y visible.

So when threads launched, rid Is this there's no docs for it at all, just a published package

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.

tasty treat. We're gonna be talking about, Hey. Did you see that that is it just gives you a little clicker when you click the thing. It everything that you do. Everything. Yeah. Yeah. And and you also I mean, like you said, with the other stuff to deter 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 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 The the best of reasons. Like, oh, this is faster or whatever. No. It's probably not for for those reasons. But yeah.

Welcome to syntax. On this Monday, 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 context that was, make bigger deals of than they need to when it all comes down to scoping.

ad blockers. That's how they work. It's essentially,

never that And the the solution to that on threads,

Rid. But it's JavaScript only. So what I did is I said, give me a div a quick rundown. I've And they're tracking And here we go. 22,062 But maybe they it's a lot easier for them to just have a dedicated div on the page The React props on a lot of these, it's all event handlers. So my theory I don't know if this is true.

trying to circumvent, But this one is has Polaris user hover card container 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

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 And

I guess it is generated for them. And that I guess that also helps in avoiding naming collisions as well. Right? Like, Not gigs. Thirty, 50 megs of CSS for the entire facebook.com, If you look on npm, Mhmm. So we'll we'll get into that as well. I think I'm right.

the atomic name of that CSS class would be.

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,

3rd 7 divs to display somebody's name on Facebook? just via straight up, And then it says, like, background red, text align center, rid. Goog classes that are generated.

You know what I I really like in this realm is Arc

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

atomic classes. So, Yeah, it's interesting that they

when they could A new helper class. Again, there's a possibility,

HTML tags 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.

Has, Arc Browser. Yeah. Has in your CSS or whatever selectors

because at a certain point they have to properly label it with ARIA attributes.

And they were trying to with the text of discover more rid and then go up 3 levels I think even Chrome Firefox DevTools elements or Oh, I see. Yeah. Elements on the page.

with utility,

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 rid something while his phone was shut off. That's what Bill meant.

Because there's just little things. Like, the the scroll bars

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

grabs the selector for the thing you're clicking.

nested classes that apply to different things. You simply just have as to, like, why When you view source on Instagram, Facebook, or now threads,

Based on a list of whatever classes 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.

programmatically Rid. When you look at all the classes, how come the classes are all like x49 if you click on a div, like I'm going rid to Instagram right now and I am clicking on a div

right, just putting display none on the things 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.

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

They they would like garble it into many divs And then hide and show and overlap with CSS and all of their classes are generate, Whereas if you actually

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

query selector, I had 800 people and every single person had a square. So I was rendering 800 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 said But I forget how I found it, but I was poking around in there, and I found, like, an x date they have 1 class traction.

rid Because there was a famous post probably 4 or 5 years ago Rid oh, last thing I had here was you could collide any different providers in Facebook.

with those names. So now they're just generated for you.

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 What's going on with all these divs? Why do you have so many divs? from about two and a half years ago of, like, position static.

Facebook would write the word advertisement.

rid The author's writing t a l or or whatever the 80,000 times. Let's write 1 class for that. But instead of

something I miss when using the like the Twitter mobile app like a hover intent, like a card that will show you the person's profile rid Fifteen classes on it. They have, A lot of people when I, like, posted it, a lot of people 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 And it allows you it's like an XML based selector, and it allows you to select elements based on their text.

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

If it

Issues? No? Yeah. You you said You got it. Yeah. Specificity.

It avoids all specificity.

globally, We'll rid diagnosed with DIVIDUS. You have too many divs. So there X data is something totally different.

part of CSS there and the entire thing because

rid Programmatically generated. So it's not like you can grab on to something with a class of just apply it directly to it.

looks

are on popular websites denoting ads. But for the most part, a general purpose one is going to look at major ad serving,

so that it says the word advertisement.

like you mentioned, so this is kind of like styled components meets tailwind. It's like styled components

And if you look at the CSS, it's applying

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.

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

you author it in, like, groups of styles that you're used to. But the StyleX 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 Let me hold on. Let me do document dot query selector and see how many.

Property value combination weird, garbled, unreadable, Facebook needs to both render out that card As well as they are literally tracking Rid. I that's probably that sounds like Tailwind where literally every single class you add to it rid is is, providers they all have event handlers attached to them, rid. Meaning

rid. You have a dueling piano scenario where you're both writing CSS to try to

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,

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.

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

So but I watched the YouTube video, and the way he explained it is it works very similar

For Align Content Stretch. And then they have another class

like, 30, 50 gigs where

office furniture.

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

properties,

big systems

CSS.

Generate 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 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 and you think, oh, and 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 like a post style and then You put 6 or 7 properties along with it, and then you might have, like, a post active rid Original, It's applied directly to the class. So you sort of circumvent the whole cascade style that you can sort of compose and add on. Okay. When it's active, we'll put a red border

because it does that. And I guess at the end of the day, they just have 1 big CSS file or maybe Spans on the page.

and it will replace rid. I, I couldn't help myself but do a little inspect element. And, That's it. One property, one value. Then they have another class

on there. That sounds a lot like That is 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 rid I moved it over to Like in my case, I was rendering Rid. They but they do Extension? So there's and Twitter the same way. Twitter uses thing called React Native Web, with somebody's username in it. And it has probably rid It's certainly a way you can do it as well if the dev tools are off. Even rid. Five, 10, 15 different classes the to render or something

Rid Yeah. So I I dove into this pretty deep because

author it. They so I I I watched a tracking everything, 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 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.

Mhmm.

like dot post.

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

Groups of CSS to it, and the tool will figure it out for you.

the first one they have is x r y x f n j.

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 that was published 9 months ago, but there's no corresponding

maybe 10% of that.

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

and get a ton of,

Spend a long time on, like, a tip or something. It will get Rid I love being able to customize website. It's it's 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. Exactly.

So what we're going to attempt to do today is to break down

why do they do that? Rid. And I've asked around I am excited to talk about this.

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 They it's not possible for them. Well, it is possible, but they could potentially being generating, groups of styles. So you might have around it. And then what StyleX does so you still author it rid Both scoped as well as, 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, re Selector? No. X so XPath is something that predates okay. Did you hover over the person's first name or their last name? Did you hover over top of their icon? a lot of GitHub repo out there. All there is do they have a class discover more instagram.com 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

and I never have gotten a straight answer.

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

Yeah. I think yeah.

Scoping, which, you know, so many things in

rid. Employees will ever say why they have so many divs.

on why none of the Facebook that contain

CSS people on over to syntax.fm