#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
Digesting this is an awful lot of work, but here goes!
<div class="css-1dbjc4n r-18u37iz r-1h0z5md" />
One element in a group of many similar ones (outer role="group" div is missing here). There are multiple different renders of this "component" which is why there are more than one class. In BEM with CSS utilities this would have been something like <li class="like-list__item flex-start flex-direction-row">.
The second div appears to be dedicated to accessibility and functionality, and re-implements HTML's native <button> element. It is easier to style a div than a button so that is probably the reasoning for the re-implementation. They've had to add custom event handlers to match native button behavior (such as enter and space working like a click).
data-focusable="true" is probably somewhat unnecessary workaround to something, the true functionality of tabbability is achieved with tabindex="0". This also only exists because of not using a button element.
Targetting elements when everything is a div is hard they also use data-testid="like" so that they can find the element in their tests.
Equivalent semantic HTML could be something like:
<buttonclass="transparent-button no-focus-outline no-user-select center-content overflow-visible"><spanclass="sr-only">5 Likes. Like</span><!-- more elements here --></button>
Of course you'd leave out some of "pointless" styles such as center-content, no-user-select and overflow-visible as these don't have real effect to styles in a native button.
Whether to use aria-label or element with a screen reader accessibility class is a matter of taste.
This element appears to be a generic layout component. The first class defines a few resets while all the other classes are single purpose utilities that control things such as font-family, font-size, white-space, transitions, flexbox, and so on.
In a normal HTML approach this element would not exists at all and button would have all the needed classes.
Two <div class="css-1dbjc4n r-xoduu5" /> elements
These are child elements for the generic layout element. Essentially contains a lot of style resets. The first element contains icon, and the second element contains the number of likes.
This element creates a circle that is placed behind icon. You can see it transitioning when liking a post. The circle is created by combining many classes.
<svg />
It's the icon!
<span /> elements
These two elements wrap the number. Again contain a lot of style resets and then use of single purpose classes some of which grant duplicate styles that already exist.
How could it be written?
If written more from the point of HTML and CSS things could look like this:
It is an oversimplification as far as used classes go, but the reduction of HTML elements is notable and the same visual end result can be achieved with just this.
Twitter ends up with what they have for multiple reasons, for example they can have productive devs working on the frontend who have no knowledge of CSS. They can keep total amount of CSS somewhat minimal even if there are classes or styles that are technically unnecessary. The price they pay is the need of re-implementing native browser features and the resulting DOM/HTML is verbose.
The many divs are a result of abstracting every little detail into their own element or class. Taking Twitter's like button as an example:
Digesting this is an awful lot of work, but here goes!
<div class="css-1dbjc4n r-18u37iz r-1h0z5md" />One element in a group of many similar ones (outer
role="group"div is missing here). There are multiple different renders of this "component" which is why there are more than one class. In BEM with CSS utilities this would have been something like<li class="like-list__item flex-start flex-direction-row">.<div class="css-18t94o4 css-1dbjc4n r-1777fci r-11cpok1 r-1ny4l3l r-bztko3 r-lrvibr" />The second div appears to be dedicated to accessibility and functionality, and re-implements HTML's native
<button>element. It is easier to style a div than a button so that is probably the reasoning for the re-implementation. They've had to add custom event handlers to match native button behavior (such as enter and space working like a click).data-focusable="true"is probably somewhat unnecessary workaround to something, the true functionality of tabbability is achieved withtabindex="0". This also only exists because of not using a button element.Targetting elements when everything is a div is hard they also use
data-testid="like"so that they can find the element in their tests.Equivalent semantic HTML could be something like:
Of course you'd leave out some of "pointless" styles such as
center-content,no-user-selectandoverflow-visibleas these don't have real effect to styles in a native button.Whether to use
aria-labelor element with a screen reader accessibility class is a matter of taste.<div class="css-901oao r-1awozwy r-1re7ezh r-6koalj r-1qd0xha r-a023e6 r-16dba41 r-1h0z5md r-ad9z0x r-bcqeeo r-o7ynqc r-clp7b1 r-3s2u2q r-qvutc0" />This element appears to be a generic layout component. The first class defines a few resets while all the other classes are single purpose utilities that control things such as font-family, font-size, white-space, transitions, flexbox, and so on.
In a normal HTML approach this element would not exists at all and button would have all the needed classes.
Two
<div class="css-1dbjc4n r-xoduu5" />elementsThese are child elements for the generic layout element. Essentially contains a lot of style resets. The first element contains icon, and the second element contains the number of likes.
<div class="css-1dbjc4n r-sdzlij r-1p0dtai r-xoduu5 r-1d2f490 r-xf4iuw r-1ny4l3l r-u8s1d r-zchlnj r-ipm5af r-o7ynqc r-6416eg"></div>This element creates a circle that is placed behind icon. You can see it transitioning when liking a post. The circle is created by combining many classes.
<svg />It's the icon!
<span />elementsThese two elements wrap the number. Again contain a lot of style resets and then use of single purpose classes some of which grant duplicate styles that already exist.
How could it be written?
If written more from the point of HTML and CSS things could look like this:
It is an oversimplification as far as used classes go, but the reduction of HTML elements is notable and the same visual end result can be achieved with just this.
Twitter ends up with what they have for multiple reasons, for example they can have productive devs working on the frontend who have no knowledge of CSS. They can keep total amount of CSS somewhat minimal even if there are classes or styles that are technically unnecessary. The price they pay is the need of re-implementing native browser features and the resulting DOM/HTML is verbose.
Very detailed explanation, thanks for the effort
Thank you for this detailed rundown!
😲😲😲. This is really enlightening. Thanks, Vesa.