It used to be the case that HTML and CSS for a website were limited in functionality. So Javascript and backend technologies were used to account for some of the limitations we ran into. We now have various frameworks and tooling that we use in place of vanilla HTML and CSS as the starting point that includes everything but the kitchen sink.

But HTML and CSS and built-in browser technologies have continued to evolve throughout the years. To the point where complex frameworks are no longer needed when it comes to building any modern, performant, website. Because you already have everything you need.

Layers of complexities

Each framework and scripting tool that you decide to use adds layers of complex code:

• CSS frameworks that add a lot of classes and steps to keep track of
• Javascript frameworks that output overly-complicated HTML
• AI which uses overly-complicated code as its reference and makes it even more complicated
• Accessibility that needs to be addressed on top of the complex code
• Performance that needs to be addressed with added tooling
• Specialized servers that are required to process all the overhead

Each layer has to account for the problems that a previous layer created. And with each layer, you lose understanding of the code. So when issues pop up, you spend a lot of extra time figuring out how to fix them.

Ultimately, the end user experience suffers, with slower load times, janky layouts, and constant bugs. And you’re stuck with bloated code, rigid design that's difficult to update, and a hefty dose of maintenance.

The native browser language

HTML and CSS should always be the starting point for a website because they are the native languages of the browser. And if most of a website is content, then it should consist mostly of the HTML needed to display that content. With CSS handling all of your design’s needs.

Clean, hand-coded, semantic HTML allows for accessibility from the beginning. The code is upward of ten times less complex than generated code in a framework, so you also get performance virtually for free. And you get all that is provided by browsers now: form validation, modals, animation, web components, etc.

There is very little that needs to be done outside what’s available to require heavy Javascript use or expensive server software. And if something is still missing, Javascript is always an option to fill in the gaps, which is how browsers prefer it.

All for a much better user experience, more flexbility over your design, and fewer issues to have to deal with. And you get rid of your technical debt.

HTML-first should apply to content management systems too. To setup a theme in Blocks Edit, you only need to add tags within your HTML to create your components and enable editable content.