Why it's good for users that HTML, CSS and JS are separate languages

Published 25 November 2020 category: thoughts

This week, somebody proposed to replace HTML, CSS and JavaScript with just one language, arguing “they heavily overlap each other”. They wrote the separation between structure, styles and interactivity is based on a “false premise“. I don’t think it is. In this post, we’ll look at why it is good for people that HTML, CSS and JS are separate languages.

I’m not here to make fun of the proposal, anyone is welcome to suggest ideas for the web platform. I do want to give an overview of why the current state of things works satisfactorily. Because, as journalist Zeynep Tefepkçi said (source):

If you have something wonderful, if you do not defend it, you will lose it.

On a sidenote: the separation between structure, style and interactivity goes all the way back to the web’s first proposal. At the start, there was only structure. The platform was for scientists to exchange documents. After the initial idea, a bunch of smart minds worked years on making the platform to what it is and what it is used for today. This still goes on. Find out more about web history in my talk On the origin of cascades (video), or Jeremy Keith and Remy Sharpe’s awesome How we built the World Wide Web in 5 days.

Some user needs

Users need structure separated out

The interesting thing about the web is that you never know who you’re building stuff for exactly. Even if you keep statistics. There are so many different users consuming web content. They all have different devices, OSes, screen sizes, default languages, assistive technologies, user preferences… Because of this huge variety, having the structure of web pages (or apps) expressed in a language that is just for structure is essential.

We need shared structure so that:

All of these users rely on us writing HTML (headings, semantic structure, autocomplete attributes, lang attributes, respectively). Would we want to break the web for those users? Or, if we use the JSON abstraction suggested in the aforementioned proposal, and generate DOM from that, would it be worth breaking the way developers are currently used to making accessible experiences? This stuff is hard to teach as it is.

Even if we would time travel back to the nineties and could invent the web from scratch, we’d still need to express semantics. Abstracting semantics to JSON may solve some problems and make some people’s life easier, but having seen some attempts to that, it usually removes the simplicity and flexibility that HTML offers.

Users need style separated out

Like it is important to have structure separated out, users also need us to have style as a separate thing.

We need style separated out, so that:

Users need interactivity separated out

Some users might even want (or have) interactivity separated out, for instance if the IT department of their organisation turned the feature off company-wide. Some users have JavaScript turned off manually. These days, neither are common at all, but there are still good reasons to think about what your website is without JavaScript, because JavaScript loss can happen accidentally.

We need interactivity separated out, because:

As Jake Archibald said in 2012:

“We don’t have any non-JavaScript users” No, all your users are non-JS while they’re downloading your JS

That’s right, all your users are non-JS while they’re downloading your JS.

Existing abstractions

None of this is to say it can’t be useful to abstract some parts of the web stack, for some teams. People abstract HTML, CSS and JavaScript all the time. People happily separate concerns differently: not on a page level, but on a UI component level.

On the markup end of things, there are solutions like Sanity’s Portable Text that defines content in JSON, so that it can be reused across many different “channels”. This is a format for storing and transferring data, not for displaying it on a site. Because before you display it anywhere, you’d write a template to do that, in HTML. In a government project I worked on years ago, the team abstracted form fields to JSON before converting them to HTML. I currently work on a project where we use XSLT to specify some stuff before generating HTML.

For CSS there are extensions like Sass and Less, utility-first approaches like Tailwind and many methods to define CSS inside JavaScript component. From JSSS (from 1997) to CSS in JS today, there is lots to choose.

As for JavaScript: there are numerous abstractions that make some of the syntax of JavaScript easier (jQuery, in its time), that help developers write components with less boilerplate (like Svelte and Vue) and that help teams make less programmatically avoidable mistakes (TypeScript).

I don’t use any of these abstractions for this site, or most others I work on. Yet, many approaches are popular with teams building all sorts of websites. Choose any or no abstractions, whatever helps you serve the best HTML, CSS and JS to end users.

We’re very lucky that all of these abstract things that are themselves simple (ish) building stones: HTML, CSS and (to a different extent) JavaScript. With abstractions, individual teams and organisations can separate their concerns differently as they please, without changing the building blocks that web users rely on.

Could you benefit people in your abstractions? Maybe. The proposal mentions specific parameters for visual impairments and content that can trigger seizures. But it is better for users (including their privacy) to have such things in the main HTML and CSS, regardless of whether that was written by hand or outputted by some abstraction.

Conclusion

The separation between HTML, CSS and JavaScript as it currently is benefits web users. It does this in many ways that sometimes only become apparent after years (CSS was invented 25 years ago, when phones with browsers did not yet exist, but different media were already taken into account). It’s exciting to abstract parts of the web and remodel things for your own use case, but I can’t emphasise enough that the web is for people. Well written and well separated HTML and CSS is important to their experience of it.

Thanks to Darius, Jen, Krijn, Thijs, Tim and Coralie for pointing out typos and mishaps.

Comments, likes & shares (321)

Lewis Cowles 25 Nov 2020 12:39:00

Another thing that Mike Little, co-creator of WordPress let me in on that I did not know is that sometimes users in need of assistive technologies cannot easily upgrade without significant costs, which may make them unable to use the “new standards”, which is another great argument for the cascade and for structure with progressively enhanced presentation and interactivity.

Minh 27 Nov 2020 01:30:17

I would challenge this a little bit – the points that you presented in this article are entirely valid; However, these benefits are from a web-consumer point of view and not a developer point of view. There’s nothing to say that these benefits cannot be realised with a unification of the 3 languages as presented in the proposal. The capabilities and use cases presented are simply a product that can be replicated using other technologies. I would raise the analogy of writing Hello World in C or in Rust – one cannot say that because C can write hello world and benefits the user that Rust is not capable or is inherently a worse approach – both are tools to create the end product of Hello World.

This is not to say that the content of this article is not relevant – I just don’t think they are relevant to the argument against the grand unification proposal.

Minh 27 Nov 2020 01:48:00

I would challenge this a little bit – the points that you presented in this article are entirely valid; However, these benefits are from a web-consumer point of view and not a developer point of view. There’s nothing to say that these benefits cannot be realised with a unification of the 3 languages as presented in the proposal. The capabilities and use cases presented are simply a product that can be replicated using other technologies. I would raise the analogy of writing Hello World in C or in Rust – one cannot say that because C can write hello world and benefits the user that Rust is not capable or is inherently a worse approach – both are tools to create the end product of Hello World.

This is not to say that the content of this article is not relevant – I just don’t think they are relevant to the argument against the grand unification proposal.

Benny Bottema 02 Dec 2020 10:01:35

Exactly what Minh said. This post makes valid arguments for applying semantics and abstracting and separating user concerns, but that has nothing to do with the tech stack of developing for the web.

I’m not saying I agree with the proposal of a grand unification, but it seems this post completely missed the point and addresses different issues.

Random Guy 02 Dec 2020 13:42:45

And then people use React + CSS in JS just to have everything in one place. Not saying separation is bad, but the merger will happen sooner than later, it is already happening with mobile and desktop platforms, web isn’t too far away, web assembly will open the door to this unfortunately.

Sean 02 Dec 2020 18:46:00

Even from a development perspective this is a horrible idea. HTML, CSS and JS are all their own distinct sections with distinct limits. For all intents and purposes HTML and CSS are already able to be merged, so where is the gain? We already know heavy inline coding of CSS has a negative affect on performance. Then you also blur the lines or appearance and structure which while similar are not the same.

IMHO the best way to approach this is by acknowledging each of these languages are unique tools. As such that does not say in the least how or when you must use them. It merely indicates when a particular tool might be best suited for a purpose.

Either way, even if you tok the time to unify all three languages you still run into the problem that many third party sub-languages exist and new ones will come over time. How do you merge all of these sub-languages and to what benefit is it really?

The separation by tool is the best way as it gives full control to the one using the tools in the first place. Then there is the cost to rewrite basically all the current websites and tools just to get something some people think but do not know is more efficient. Plus this is completely overlooking the fact that HTML, CCS and JS all operate on other sets of tools for their foundation as well.

Grand unification is already well supported. You implement it on your own at your leisure and at your own personal costs, be it time, effort, energy, resources, etc. You can also live with any unforeseen consequences all on your dime.

Bret Bernhoft 24 Dec 2020 10:01:15

The modern Internet is indeed a product of twenty five (or more) years of user-first Web Development. And the future of the Web is therein as well. The human user of the Internet is the primary reason why the Internet exists in the first place.

To accomplish this, HTML, CSS and JavaScript have their own incredible eco-systems that (however intertwined) are the engines that make what the Web is and can become. Thankfully there’s a broad consensus that the Net will continue on this track.

Stephanie 01 Mar 2021 08:03:11

Thank you for the tips! Happy Freelancing, everyone! I wish I can learn how to do this too!

Stephanie 01 Mar 2021 08:05:49

Thank you for the tips! Happy Freelancing, everyone! I wish I can learn how to do this too!

Thomas Schürmann replied: Full agree! For most websites Javascript is not even needed.
Steve Lee replied: JS is basically for when the web platform is not enough - and then you take on much responsibility for your customisation.
JulieG replied: Thankyou!
TvGeest replied: Leerzaam Lunchleesvoer:
Sami Keijonen replied: Wise words. Especially pointing out that you are not making fun of the proposal.
Bram Smulders replied: 👇🏼
Anders Grendstadbakk replied: This is so spot on! Using progressive enhancement to give users the best version for them and still having a good baseline is what makes web development amazing.
Baldur Bjarnason replied: “Why it’s good for users that HTML, CSS and JS are separate languages” This. hiddedevries.nl/en/blog/2020-1…
Stephanie Eckles replied: A perfect response to "the proposal" that was published yesterday, full of terrifically useful links and references for how and why the web exists as it does
Eric Eggert replied: Hidde is smart. ⬇️
Marijke Luttekes replied: Excellent blog post by @hdv. It drew inspiration from that jaw-dropping ticket that was posted on GitHub yesterday. #webdev
Felquis G replied: This is WHY I'm willing to work on non-SPA web sites.
Frontend Daily 🚀 replied: Why It's Good for Users That HTML, CSS and JS Are Separate Languages: hiddedevries.nl/en/blog/2020-1…
Fabian Pimminger replied: "Why it's good for users that HTML, CSS and JS are separate languages" hiddedevries.nl/en/blog/2020-1…
ながしまきょう replied: HTMLとCSS、JavaScriptが分かれているとユーザーに便益がある。統合された新言語が開発者に多くの利点をもたらすことは否定していないので、開発効率でぶん殴れそう。 hiddedevries.nl/en/blog/2020-1…
Akihito Koriyama replied: “if we would time travel back to the nineties and could invent the web from scratch”
Sara Soueidan replied:
As a response to the "Grand Unification" proposal below, @hdv wrote a very thoughtful piece on "Why it's good for users that HTML, CSS and JS are separate languages" hiddedevries.nl/en/blog/2020-1…
twitter.com/sarasoueidan/s…
Ondřej Konečný replied: Proč je dobré pro uživatele, že HTML, CSS a JS jsou samostatné jazyky? Článek na reakci návrhu sjednocení těchto jazyků do jednoho. hiddedevries.nl/en/blog/2020-1…
Ezequiel Bruni replied:
Oh thank God someone smarter than me took this topic on. I confess that when I read the original proposal, my mental response was an expansive list of obscenities. I didn't even know where to think about starting to reply. JS is not and shouldn't be the whole of the web.
Jarrid Bainbridge replied: Something I fully believe in, why html, CSS and js are separate languages. hiddedevries.nl/en/blog/2020-1…
全部入りHTML太郎 replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Oleksa Novyk replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1… The current set that drives web is solid and deep, we can't just "replace it" with a better set of techs. #webdev
Олекса replied:
HTML, CSS та JS — це окремі мови і чому це добре для користувачів hiddedevries.nl/en/blog/2020-1… Основна зв'язка технологій, на якій зараз працює веб, дуже міцна і глибока, ми не можемо її просто замінити на щось краще. #webdev #ukr
bertrandkeller replied:
hiddedevries.nl/en/blog/2020-1… - hiddedevries.nl What I do About me Blog Talks Contact Why it's good for users that HTML, CSS and JS are separate languages
Daniel Appelquist replied: 💯👇
Dave Letorey replied: This is great, thank you @hdv for writing it.
dailydevlinks. replied:
📝 Why it's good for users that HTML, CSS and JS are separate languages 🔗 hiddedevries.nl/en/blog/2020-1… #html #css #javascript #webdev #dailydevlinks
Roland van Ipenburg replied: Who cares about users when a bunch of full stack developers are running the show?
td540 replied: I’m voting _for_ the unification idea. Your rebuttals can be easily countered using modern JavaScript methods. Unification makes stuff more stable, simpler, more efficient, cheaper, and more accessible. Just watch Apple and SwiftUI.
Hidde replied: there are cases to be made that JS heavy products are not stable, not simple, not efficient, maybe cheap and also less accessible. It's probably an “it depends”
td540 replied: You’re right, but still. Ask why HTML was created. It was invented for non-tech people to quickly structure information, but evolved to become so complex that today lots of companies struggle with crazy outdated expensive specialized content management systems.
Bruce Lawson, Antifa. Black Lives Matter. replied: Just gave a new starter a 40 min braindump about HTML, CSS, JS and WCAG (what POUR means). Homework is to read HTML Design Principles w3.org/TR/html-design… and @hdv's Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Scott Wilson replied: Very good, succinct explainer. (As a 'web polyglot' I write HTML, design with CSS, and develop using JS.)
Dennis Lembrée 🦃 replied: Great article. But I am extremely saddened and disappointed that it must be written. #webdev
Frontend Daily 🚀 replied: Why It's Good for Users That HTML, CSS and JS Are Separate Languages: hiddedevries.nl/en/blog/2020-1…
Ekrem Büyükkaya replied: Bombos yazi, hicbir argumani bu kapiya cikmiyor.
Stef Walter replied:
#WebStack " Why it's good for users that HTML, CSS and JS are separate languages " a really elegant explanation by Hidde de Vries around user needs and accessibility. And a good reminder that something things are like they are for a reason hiddedevries.nl/en/blog/2020-1…
Kevin Stewart replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1… via @instapaper
beer replied:
nobody: this guy: it's good that html, css, and js are separate languages, actually hiddedevries.nl/en/blog/2020-1…
Chiyana Simões 😷 replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Fresh Frontend Links replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Luke Davis (He/Him) replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Front-End Front replied: Why it’s good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Samuel Lavoie replied: We need to keep HTML, CSS and JS; structure, style, and interactivity, separate hiddedevries.nl/en/blog/2020-1…
Gérald Kembellec replied:
Sérieusement, il encore besoin d'expliquer pourquoi séparer contenus, présentation et manipulation est important ? Même si l'on considère l'ensemble de manière holistique, s'il faut une vision globale, noyer les informations dans un bruit communicationnel? hiddedevries.nl/en/blog/2020-1…
Rakhi replied: "This week, somebody proposed to replace HTML, CSS and JavaScript with just one language, arguing “they heavily overlap each other”. They wrote the separation between structure, styles and interactivity is based on a “false premise“ 😱😱
Tom Tinkerson replied:
"»If you have something wonderful, if you do not defend it, you will lose it.«" 🙏
Alex replied: Because “separation of concerns”.
joe jenett replied: Why it’s good for users that HTML, CSS and JS are separate languages
[garrettc]
semantic web news replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…, see more tweetedtimes.com/topic/RWW/sema…
Scott replied:
I’ve yet to understand the fear around using HTML and CSS. hiddedevries.nl/en/blog/2020-1…
Radimir Bitsov replied:
I wasn't aware that there was a proposal to replace HTML, CSS and JavaScript with just one language 😳 @hdv perfectly summarizes why the separation is important and benefits web users! hiddedevries.nl/en/blog/2020-1…
joe jenett replied: Why it’s good for users that HTML, CSS and JS are separate languages
[garrettc]
Phillipe Calmet Williams replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1… #HTML #CSS #JS #Web
Nikolai Shcherbin replied: Why it's good for users that #HTML, #CSS and #JS are separate languages via o.wzm.me/river/v/134787 hiddedevries.nl/en/blog/2020-1…
Deborah Edwards-Oñoro replied:
The interesting thing about the web is that you never know who you’re building stuff for exactly. Even if you keep statistics. hiddedevries.nl/en/blog/2020-1… #HTML #CSS #WebDesign
Andy Crouch replied: "Why it's good for users that HTML, CSS and JS are separate languages" ... hiddedevries.nl/en/blog/2020-1…
Hacker News replied: Why it's good for users that HTML, CSS and JavaScript are separate languages: hiddedevries.nl/en/blog/2020-1… Comments: news.ycombinator.com/item?id=252742…
Tweet Snipper replied: Why it's good for users that HTML, CSS and JavaScript are separate languages hiddedevries.nl/en/blog/2020-1…
Hacker News 20 replied: Why it's good for users that HTML, CSS and JavaScript are separate languages hiddedevries.nl/en/blog/2020-1… (news.ycombinator.com/item?id=252742…)
HackerNewsTop10 replied:
Why it's good for users that HTML, CSS and JavaScript are separate languages Link: hiddedevries.nl/en/blog/2020-1… Comments: news.ycombinator.com/item?id=252742…
Angsuman Chakraborty replied: Why it's good for users that #HTML, CSS and #JavaScript are separate languages hiddedevries.nl/en/blog/2020-1…
Hacker News記事題日本語翻訳 replied: HTML、CSS、JSが別々の言語であることはユーザーにとって良いことです hiddedevries.nl/en/blog/2020-1…
Hacker News 50 replied: It’s good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1… (news.ycombinator.com/item?id=252742…)
(((JReuben1))) replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Reuben Walker, Mobile Atom Media replied: Why it's good for users that HTML, CSS and JS are separate languages. hiddedevries.nl/en/blog/2020-1… #HTML #CSS #JS
Claude Ayitey replied: Good read for the morning. hiddedevries.nl/en/blog/2020-1…
mary j ziegler replied:
Here's why it serves people with varying needs to divide the web platform into structure, design, and behavior (html, CSS, and javascript) #a11y hiddedevries.nl/en/blog/2020-1…
Fynn Becker replied: Separation of concerns is a good thing: hiddedevries.nl/en/blog/2020-1…
Full Stack Python replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Speckyboy replied: Why it's good for users that HTML, #CSS and #JS are separate languages hiddedevries.nl/en/blog/2020-1…
SDS Labs replied: Top story: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…, see more tweetedtimes.com/justcreative/n…
stooni, webstooni replied: Top story: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…, see more tweetedtimes.com/v/1469?s=tnp
LegalMatch Philippines replied:
HTML, CSS, and JS are separate languages, all for the web platform. But should they be separate or should they just be merged? hiddedevries.nl/en/blog/2020-1…
Jacky replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Joulse replied:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
CSS Basics replied: Why it's good for users that HTML, CSS and JS are separate languages, by @hdv hiddedevries.nl/en/blog/2020-1…
Visyu Solution replied: Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Alfonso Fernandez-Barandiaran replied:
Why it's good for users that HTML, CSS and JS are separate languages. hiddedevries.nl/en/blog/2020-1…
The A11Y Project replied: "It’s exciting to abstract parts of the web and remodel things for your own use case, but I can’t emphasise enough that the web is for people. Well written and well separated HTML and CSS is important to their experience of it." @hdv hiddedevries.nl/en/blog/2020-1…
Leave a comment
Posted a response to this?

This website uses Webmentions. You can manually notify me if you have posted a response, by entering the URL below.