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)
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).
Thanks, Austin. I would check it out.
Very detailed explanation, thanks for the effort
One added benefit is to make it diffult for the script kiddies to write automation tools to extract data or automate spamming behaviors.
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.
😀😀😀
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 ?
Thank you for this detailed rundown!
😲😲😲. This is really enlightening. Thanks, Vesa.
Thanks again Kieran. I surely would love the book(The Lean Web). I'm a fan of keeping things simple 😀
Obfuscation
🤔🤔🤔 Thanks, John
🤔 Thanks a lot
Thanks, Kieran. I now get it.