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

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:

  • people with low vision can use high contrast mode; a WebAIM survey showed 51.4% do (see also Melanie Richard’excellent The Tailored Web: Effectively Honoring Visual Preferences)
  • people who only have a mobile device can access the same website, but on a smaller screen (responsive design worked, because CSS allowed HTML to be device-agnostic)
  • people with dyslexia may want to override some styles use a dyslexia friendly typeface (see Dyslexic Fonts by Seren Davies)
  • people who (can) only use their keyboard can turn on browser plugins that force focus outlines
  • users of Twitter may want to use a custom style sheet to turn off the Trending panel (it me 🙄)

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:

  • some people use a browser with advanced tracking protection, like Safari or Firefox (see my post On the importance of testing with content blockers)
  • some people may be on low bandwidth
  • some people may use an old device or operating system for valid reasons
  • some people may be going to your site while you’ve just deployed a script that breaks in some browsers, but you’ve not found out during testing, because it is obscure

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 (312)

Stephanie Eckles, Dᴀɴ Mᴏᴏʀᴇ, Chris Galbraith, Susanne Koenig, Todd, ctzn0, Matt, Koen Cornelis, Patrick Westerhoff, Michael Spellacy (Spell), diekus, Lasha Krikheli, John Liu, Phil Hawksworth, Robert 🤘🏻, Ganesh Sadasivan, Tom Hermans🤘, Matthias Ott, Rob Styles, Sebastiaan Andeweg, darkaesthetics, Claire Brotherton, Andy Bell, Sam H., Phil Sherry, Michelle Barker, Steve Lee, Manuel Matuzović, Frontend Daily 🚀, Thomas Schürmann, Jamessir Bensonmum, Mark Heggan, Mike Gifford, nico fonseca (•ε • ), Lowkey-2, Naomi², NickM, Pete Barr 🤟, Jimi Robaer, Bobby Duff, Alicia Jarvis (She/Her/Hers), CPACC, CSM 🇨🇦, eebrah, negi4a, Joe Gaffey, TvGeest, Anders Grendstadbakk, LurkGently, Annemarie Parsons, Jens Grochtdreis, Jon Walter, Avinash Namadhari, David, Wendy Reid, Marijke Luttekes, Nate Moore, Rafa Romero Dios, Ryan Mulligan, Erik O, Olly Hodgson, Kristopher Van Sant, nicknoop, carokero, Kevin, Benjy Stanton, Fabricio Augusto, FλL-D1, Marat (he/him), Rufus Witt, Louie Richardson, Barry Pollard, cathy dutton, Luke Peng, KevMonstah, Marc Stalfoort, Arne Sierens, irinafumarel, EssejTravog, Christian Cousquer, Gerrit Berkouwer, Laura Whitehead, Lee Pearson, Daniel ☀, Gaz Joyce, Ben Furfie, Asa Lugada, {stylegehen}, Scott, Rich (in name only), Tzviya Siegman, Chris Johnson, Jonic (ジョニック), Chelsea Owens, MWDelaney, R C Neil, Batbayar B., Akihito Koriyama, JP, Imtiaz Uddin, The-Online.com Domain Name Hosting Services, Shakhobiddin, Boluwatife 🇯🇵, Johan Bové, Jacob Bloom, Ezequiel Bruni, Jan van Helvoort, Guillaume Deblock, Mikaela, Stuart Langridge, #ENDSARS, Andy Porter, Jonathan Kingston, JP Santos, Florian Scholz, Bogdan Cerovac, Bruno Windels, Lite⚡Code, Germain, Ana Rodrigues, W3C Technical Architecture Group, Daniel Appelquist, Vin Baluyot, Maëlig, Jаn Соrnelissen, Michiel Westerbeek, WSKY, Jewwy Qadri, Roel Van Gils, Dave Letorey, nemzes 🇪🇺, td540, Karel Persoons, Bell Omuboye, Jonathan Surmacz, Dimitris Grammatiko, Ashley Bischoff, Rock Starwind - Laptop is almost dead, hire me pls, Fredy Chondo, Remco Dekker, David Fernandez, Bene, Dan York, Enno Stuurman, HJ Chen, Gaël Poupard, mundtweeto, Matt Shaw, Rachel 👩‍💻🌱, 🦄 Alain Boudard 🇫🇷, Vulpez, Alexey Abretov, @joachim@boitam.eu, 𝕵𝐚𝐭𝐢 ✴︎, Experimental Web, dobrador de bytes, Siegfried Ehret, Alex, Omena, Mr Clean, Luigui Delyer, Sparxia, Ian, °°𝖌𝖚𝖎°°, Orangetronic, Stuart Homfray, Warren Cruz, Claude Ayitey, Abubaker Saeed, W3C Training, Peter Grucza, Stephan Jäger, Martijn Frazer, 🚩🌱Grigor Malo 📉🌴, Denis Lemire, Steve Ganz, صدام کن " فانتوم ", だある, Lucid00, Zugang für alle | Access for all, Sona/Soeun Lee and Rhian van Esch liked this

Susanne Koenig, Patrick Westerhoff, LurkGently, Sam H., Andy Bell, JulieG, Alicia Jarvis (She/Her/Hers), CPACC, CSM 🇨🇦, Steve Lee, Jamessir Bensonmum, Scott Davis, Tom Hermans🤘, Sami Keijonen, Manuel Matuzović, Rob Styles, Darius Kruythoff, David Bopp, vi, Koen Cornelis, Ganesh Sadasivan, Michael Spellacy (Spell), Ryan Mulligan, Geoff, Accessabilly, Comandeer, Luke Peng, cathy dutton, Barry Pollard, Christian Cousquer, Asa Lugada, Ben Myers 🦖, Chris Johnson, Chris Hartjes, Ana Rodrigues, Roel Van Gils, Jewwy Qadri, Joe Dolson, geertmelotte, Sarah Rainsberger, HJ Chen, David Fernandez, Gaël Poupard, @joachim@boitam.eu, Von Rudloff, Omena, W3C, Experimental Web, Coralie Mercier, Sparxia, Luigui Delyer, Ian, W3C Training and Venkatesh Kanchan reposted this

Stephanie Eckles wrote on 25 November 2020:
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 wrote on 25 November 2020:
Hidde is smart. ⬇️
Sami Keijonen wrote on 25 November 2020:
Wise words. Especially pointing out that you are not making fun of the proposal.
JulieG wrote on 25 November 2020:
Thankyou!
Steve Lee wrote on 25 November 2020:
JS is basically for when the web platform is not enough - and then you take on much responsibility for your customisation.
Bram Smulders wrote on 25 November 2020:
👇🏼
TvGeest wrote on 25 November 2020:
Leerzaam Lunchleesvoer:
Thomas Schürmann wrote on 25 November 2020:
Full agree! For most websites Javascript is not even needed.
Anders Grendstadbakk wrote on 25 November 2020:
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 wrote on 25 November 2020:
“Why it’s good for users that HTML, CSS and JS are separate languages” This. hiddedevries.nl/en/blog/2020-1…
Marijke Luttekes wrote on 25 November 2020:
Excellent blog post by @hdv. It drew inspiration from that jaw-dropping ticket that was posted on GitHub yesterday. #webdev
Frontend Daily 🚀 wrote on 25 November 2020:
Why It's Good for Users That HTML, CSS and JS Are Separate Languages: hiddedevries.nl/en/blog/2020-1…
Fabian Pimminger wrote on 25 November 2020:
"Why it's good for users that HTML, CSS and JS are separate languages" hiddedevries.nl/en/blog/2020-1…
Felquis G wrote on 25 November 2020:
This is WHY I'm willing to work on non-SPA web sites.
ながしまきょう wrote on 25 November 2020:
HTMLとCSS、JavaScriptが分かれているとユーザーに便益がある。統合された新言語が開発者に多くの利点をもたらすことは否定していないので、開発効率でぶん殴れそう。 hiddedevries.nl/en/blog/2020-1…
Akihito Koriyama wrote on 26 November 2020:
“if we would time travel back to the nineties and could invent the web from scratch”
Sara Soueidan wrote on 26 November 2020:
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ý wrote on 26 November 2020:
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 wrote on 26 November 2020:
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 wrote on 26 November 2020:
Something I fully believe in, why html, CSS and js are separate languages. hiddedevries.nl/en/blog/2020-1…
全部入りHTML太郎 wrote on 26 November 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Oleksa Novyk wrote on 26 November 2020:
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
bertrandkeller wrote on 26 November 2020:
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 wrote on 26 November 2020:
💯👇
Dave Letorey wrote on 26 November 2020:
This is great, thank you @hdv for writing it.
dailydevlinks. wrote on 26 November 2020:
📝 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 wrote on 26 November 2020:
Who cares about users when a bunch of full stack developers are running the show?
td540 wrote on 26 November 2020:
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 wrote on 26 November 2020:
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 wrote on 26 November 2020:
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.
Scott Wilson wrote on 26 November 2020:
Very good, succinct explainer. (As a 'web polyglot' I write HTML, design with CSS, and develop using JS.)
Bruce Lawson, Antifa. Black Lives Matter. wrote on 26 November 2020:
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…
Олекса wrote on 26 November 2020:
HTML, CSS та JS — це окремі мови і чому це добре для користувачів hiddedevries.nl/en/blog/2020-1… Основна зв'язка технологій, на якій зараз працює веб, дуже міцна і глибока, ми не можемо її просто замінити на щось краще. #webdev #ukr
Frontend Daily 🚀 wrote on 26 November 2020:
Why It's Good for Users That HTML, CSS and JS Are Separate Languages: hiddedevries.nl/en/blog/2020-1…
Dennis Lembrée 🦃 wrote on 26 November 2020:
Great article. But I am extremely saddened and disappointed that it must be written. #webdev
Ekrem Büyükkaya wrote on 26 November 2020:
Bombos yazi, hicbir argumani bu kapiya cikmiyor.
Stef Walter wrote on 26 November 2020:
#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 wrote on 26 November 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1… via @instapaper
beer wrote on 26 November 2020:
nobody: this guy: it's good that html, css, and js are separate languages, actually hiddedevries.nl/en/blog/2020-1…
Chiyana Simões 😷 wrote on 27 November 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Fresh Frontend Links wrote on 27 November 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Luke Davis (He/Him) wrote on 29 November 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Front-End Front wrote on 29 November 2020:
Why it’s good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Samuel Lavoie wrote on 30 November 2020:
We need to keep HTML, CSS and JS; structure, style, and interactivity, separate hiddedevries.nl/en/blog/2020-1…
Gérald Kembellec wrote on 30 November 2020:
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…
Alex wrote on 30 November 2020:
Because “separation of concerns”.
Tom Tinkerson wrote on 30 November 2020:
"»If you have something wonderful, if you do not defend it, you will lose it.«" 🙏
Rakhi wrote on 30 November 2020:
"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“ 😱😱
semantic web news wrote on 30 November 2020:
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 wrote on 30 November 2020:
I’ve yet to understand the fear around using HTML and CSS. hiddedevries.nl/en/blog/2020-1…
Radimir Bitsov wrote on 30 November 2020:
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…
Phillipe Calmet Williams wrote on 1 December 2020:
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 wrote on 1 December 2020:
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 wrote on 1 December 2020:
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 wrote on 2 December 2020:
"Why it's good for users that HTML, CSS and JS are separate languages" ... hiddedevries.nl/en/blog/2020-1…
Hacker News wrote on 2 December 2020:
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 wrote on 2 December 2020:
Why it's good for users that HTML, CSS and JavaScript are separate languages hiddedevries.nl/en/blog/2020-1…
Angsuman Chakraborty wrote on 2 December 2020:
Why it's good for users that #HTML, CSS and #JavaScript are separate languages hiddedevries.nl/en/blog/2020-1…
Hacker News 20 wrote on 2 December 2020:
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 wrote on 2 December 2020:
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…
Hacker News 50 wrote on 2 December 2020:
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…)
Hacker News記事題日本語翻訳 wrote on 2 December 2020:
HTML、CSS、JSが別々の言語であることはユーザーにとって良いことです hiddedevries.nl/en/blog/2020-1…
(((JReuben1))) wrote on 2 December 2020:
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 wrote on 3 December 2020:
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 wrote on 3 December 2020:
Good read for the morning. hiddedevries.nl/en/blog/2020-1…
mary j ziegler wrote on 4 December 2020:
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 wrote on 6 December 2020:
Separation of concerns is a good thing: hiddedevries.nl/en/blog/2020-1…
Full Stack Python wrote on 7 December 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Speckyboy wrote on 7 December 2020:
Why it's good for users that HTML, #CSS and #JS are separate languages hiddedevries.nl/en/blog/2020-1…
SDS Labs wrote on 7 December 2020:
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 wrote on 7 December 2020:
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 wrote on 10 December 2020:
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 wrote on 13 December 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Joulse wrote on 15 December 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
CSS Basics wrote on 16 December 2020:
Why it's good for users that HTML, CSS and JS are separate languages, by @hdv hiddedevries.nl/en/blog/2020-1…
Visyu Solution wrote on 25 December 2020:
Why it's good for users that HTML, CSS and JS are separate languages hiddedevries.nl/en/blog/2020-1…
Alfonso Fernandez-Barandiaran wrote on 22 January 2021:
Why it's good for users that HTML, CSS and JS are separate languages. hiddedevries.nl/en/blog/2020-1…
The A11Y Project wrote on 17 March 2021:
"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…