Twitter’s div Soup and Uglyfied CSS, Defined

No Comments

After I got here up in net growth (2005-2010 had been adolescence for me), one of many first classes I realized was to have a clear basis of HTML. “What Lovely HTML Code Seems to be Like” is definitely one of the vital common posts on this very web site. The picture in that put up made its technique to common pages on subreddits each infrequently.

Now, whereas I nonetheless usually write HTML like that by default when engaged on websites like this one, I additionally work on initiatives that don’t have HTML output like that in any respect. I don’t work on Twitter, however right here’s what you may see when opening up DevTools and inspecting the DOM there:

No person would accuse that of being “clear” HTML. The truth is, it’s not onerous to think about criticism being thrown at it. Why all of the divs! divitis!! Is that severely a <div function=”button”> c’mon now. These are terrible class names! Robotic barf!

What’s most likely nearer to the reality is that it doesn’t truly matter that a lot. It’s not that semantics don’t matter. It’s not that accessibility doesn’t matter. It’s not that efficiency doesn’t matter. It’s that this output truly does issues pretty nicely, or not less than in addition to they intend to do them.

Giuseppe Gurgone will get into the small print.

React Native for Internet gives cross platform primitives that normalize inconsistencies and permit to construct net functions which might be, amongst different issues, contact pleasant.

To the eyes of any person who’s not conversant in the framework, the HTML produced by React Native for Internet may look totally ugly and filled with unhealthy practices.

That DOM truly does produce an accessibility tree that’s anticipated and usable. The <div>s with roles are to beat sure cross-platform styling limitations. These lessons are from a styling framework that helps with scoping CSS. It appears wacky, however it’s all for a motive.

That’s to not say all is the one criticism. You can argue that robotic class names don’t permit for consumer stylesheets which will help with accessibility. You can argue the superfluous divs make for an unnecessarily heavy DOM. You can argue that delivery robotic barf makes the net much less learnable, notably with out sourcemaps.

There are issues to speak about, however simply seeing a bunch of divs with bizarre class names doesn’t imply it’s unhealthy code. And it’s not restricted to React Native both, a great deal of frameworks have their very own particular twists in what they really ship to browsers, and it’s virtually all the time in service of constructing the location work higher in some vogue, to not serve in educating or readability.

Direct Hyperlink to ArticlePermalink

The put up Twitter’s div Soup and Uglyfied CSS, Defined appeared first on CSS-Methods. You possibly can assist CSS-Methods by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment