DEV Community

David Babalola
David Babalola

Posted on

Why do some popular websites have cryptic page sources

I recently decided to inspect the page sources of some popular sites to check out the CSS used on the avatars. I noticed two things in particular:

  • The class names used are just cryptic. They just have random letters e.g. s-v7te9w.
  • They use so many divs and other tags to achieve a desired effect (like avatars).

In contrast, Dev.to does not have cryptic class names (e.g crayons-avatar__image), and also does not use many tags to achieve its own avatar(for instance) styling.

These are my questions:

  • Why are the class names so cryptic? Is it because of a framework? Are they dynamically generated?
  • Why are there so many divs(and other tags) just to do one task? Aren't they unnecessary?

Thanks a lot 😁

Top comments (15)

Collapse
 
merri profile image
Vesa Piittinen

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:

<div class="css-1dbjc4n r-18u37iz r-1h0z5md">
    <div aria-label="5 Likes. Like" role="button" data-focusable="true" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1777fci r-11cpok1 r-1ny4l3l r-bztko3 r-lrvibr" data-testid="like">
        <div dir="ltr" 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">
            <div class="css-1dbjc4n r-xoduu5">
                <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>
                <svg viewBox="0 0 24 24" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi">
                    <g>
                        <path
                            d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"
                        ></path>
                    </g>
                </svg>
            </div>
            <div class="css-1dbjc4n r-xoduu5 r-1udh08x">
                <span class="css-901oao css-16my406 r-1qd0xha r-n6v787 r-1sf4r6n r-1j6idkz r-utggzx r-d3hbe1 r-1wgg2b2 r-axxi2z r-qvutc0"><span class="css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0">5</span></span>
            </div>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

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 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:

<button class="transparent-button no-focus-outline no-user-select center-content overflow-visible">
    <span class="sr-only">5 Likes. Like</span>
    <!-- more elements here -->
</button>
Enter fullscreen mode Exit fullscreen mode

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.

<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" /> 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.

<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 /> 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:

<li class="inline-reset">
    <button class="transparent-button flex flex-center system-font">
        <span aria-hidden="true" class="icon-container circle"><svg ... /></span>
        <span aria-label="5 Likes. Like" class="">5</span>
    </button>
</li>
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
vzla0094 profile image
Eliezer Valenzuela

Very detailed explanation, thanks for the effort

Collapse
 
phase_seven profile image
Ratul Roy

Thank you for this detailed rundown!

Collapse
 
daveson217 profile image
David Babalola

😲😲😲. This is really enlightening. Thanks, Vesa.

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

I would encourage you to take a look at the HTML output from tools like Adobe Dreamwever or other similar WYSIWYG HTML editors. It's quite often horrendous unintelligible code that's functionally useless for anything except being used in the editor that generated it or displayed in a web browser.

As a general rule, when you see that type excessive tag usage, it's a code generator of some sort that's to blame. Sometimes you do need a lot of <div> elements (see for example Bootstrap dialogs, they actually do need all the involved <div>'s to properly handle styling in a uniform manner), but most of the time it's a case of lazy code generation, not actual need.

Styles are often a more complicated case to concretely diagnose though, but most cases seem to be people trying to circumvent some of the behavior of CSS (usually because they don't understand how to actually use it to do what they want in a much more efficient way).

Collapse
 
daveson217 profile image
David Babalola

Thanks, Austin. I would check it out.

Collapse
 
yellow1912 profile image
yellow1912

One added benefit is to make it diffult for the script kiddies to write automation tools to extract data or automate spamming behaviors.

Collapse
 
sickpup1212 profile image
sickpup1212 • Edited

yeah I've always figured obfuscation was the most likely motivation. I've seen what WYSIWYG code and the like turns out like, and that's probably also in large part buy to how dynamic they need to be, but it also occurred to me that if they shipped any html to potential customers that was relatively easy to reuse/rework/customize/manipulate while maintaining functionality they may have a hard time selling anything.

for twitter and other big name tech its hard to for me to attribute much probability to inexperience, laziness or anything unintentional. although I guess I could be wrong about that. seems to me its mostly abstraction and optics. trying to make it seem like way more then it is just ends up being way more in the end. or they have some kind of dope unreleased tech that explains in part for some of the gib.

Collapse
 
daveson217 profile image
David Babalola

😀😀😀

Collapse
 
vianneymi profile image
Vianney Mixtur

Good point
I am actually trying to parse a table that is made entirely of Divs like in the example above.
What would you recommend to achieve that goal ? Is there any tool that could help me ?

 
daveson217 profile image
David Babalola

Thanks again Kieran. I surely would love the book(The Lean Web). I'm a fan of keeping things simple 😀

Collapse
 
daveson217 profile image
David Babalola

🤔 Thanks a lot

Collapse
 
jwp profile image
John Peters

Obfuscation

Collapse
 
daveson217 profile image
David Babalola

🤔🤔🤔 Thanks, John

Collapse
 
daveson217 profile image
David Babalola

Thanks, Kieran. I now get it.