Was Separating Content from Presentation, Web Development’s Original Sin?

Not quite. But the full answer is more nuanced.

Paul Graham's observation, on Twitter, that CSS is complicated because it tries to separate content from presentation, got me thinking about the complexity of modern web development, how that complexity arises, how it is currently managed, and what more could done to improve the situation.

The original idea for HTML and CSS was that HTML managed content and CSS managed presentation. Javascript was intended to add dynamism to a document. This separation works well for situations where the website is viewed as an abstraction of a document. The document’s content is contained in HTML and the styling of the content is contained in CSS. This allows the document to be rendered in different ways and for different media without any changes to the HTML itself. ?Browsers have evolved where document abstraction is the model that they support most naturally and by default.

The document abstraction is not well suited for many modern websites however.? Gmail, or Facebook for example, are really applications. Developers at those companies don’t get much benefit from pretending that they are a collection of documents. The natural abstractions that applications use are components.? A component of an application manages some well-defined, and reasonably self-contained part of the applications functionality.? Components are combined to create the application. Applications use variations of the Model-View-Controller design pattern to keep all code related to a given component in one place.

Mapping an application centric MVC type abstraction consisting of a collection of ‘components’ to HTML, CSS and Javascript is at the core of what many Frontend frameworks aim to accomplish.

When viewed from this perspective, the problems with the separation that CSS/HTML/Javascript impose become clearer.? The ‘Cascading’ part of CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade)? requires that the browser combine styles from many different sources to compute the style that is actually rendered. At the most basic level, the browser will combine default styles with the styles of the ‘author’ i.e. the web application to render a web-page.? The actual rule set is considerably more complicated involving considerations of media queries and other factors. ?

This ‘cascading’ is then combined with the hierarchy of the HTML elements in the page, which impose their own structure on the CSS, and some styles will inherit styling from the ‘parent’ element in the HTML DOM hierarchy.

Finally, a web application that wants to manage its structure as a hierarchy of components will want, derived components to inherit style and functionality from parent elements. For example a telephone number entry box might inherit its styling from a text-box component.? HTML/CSS do not impose any structure here, that structure emerges from the structure of the HTML and CSS created by the application developer or the CSS framework.

The complexity of using CSS derives from having to reconcile exactly how the seemingly orthogonal set of rules for Cascading, DOM hierarchy and application component hierarchy are? resolved into a single hierarchy of rules that are finally applied to determine the appearance of an element on the page.

How Web Development Complexity is currently handled

The way the complexity of CSS is handled currently is to use a CSS framework. #Bootstrap and #Tailwind are the most popular. But there are many such frameworks.? The benefit that CSS frameworks provide is that a the programmer is able to easily reason about the visual appearance of their application. It becomes

There are nearly an infinite number of ways in which a framework can be designed to effect this reconciliation. Most of them start with a reset CSS stylesheet that changes the browser defaults for various browsers, so that an application the specifies no stylesheets will appear the same across all browsers.

Some frameworks like #Bootstrap will define CSS corresponding to components that will be combined with similar component code in HTML possibly Javascript code/framework like React, and even backend code to create a logical component.

The benefit of this system is that it’s easy to understand and the components can be used easily in an application. It primary downside is that, customizing a component, and creating new and derived components with enhanced or different behaviour is extremely difficult. This is the reason, the most Bootstrap powered websites look alike, leading to a bland and unremarkable style referred to as ‘Corporate Memphis’.

Others like #Tailwind don’t impose a component structure, but define style ‘mix-ins’ that can be combined to create the visual element of the component. In this case the style and content are effectively co-located, because usually the HTML will contain styling specify styling classes.

The benefit of a #Tailwind style of CSS framework is the flexibility in creating new components. Once you understand how to use #Tailwind, you can create a component with the exact look you want very easily.? Creating derived behaviours is simply a matter of adding additional style mix-ins. But this flexibility comes at a price.? When used in a straightforward way, Tailwind forces the HTML and CSS to be merged into a single document.? This breaks the natural separation between content and presentation that browsers encourage with the document model.? More importantly, because Tailwind requires that you combine CSS mix-in classes, the framework effectively tries to re-invent CSS within HTML, and does so poorly, by necessity. As a consequence, a programmer has a steep learning curve. First they have to learn CSS thoroughly, and then learn Tailwind’s pidgin language of classes and understand how the ‘phrases’ that Tailwind uses translate to CSS.? This imposes considerable cognitive load on the programmer.

Which style of framework to prefer really comes down to a matter of taste and needs of the project. If a project doesn’t need a very visually distinctive style and the components provided by Bootstrap will do the job, and the programmer already knows how to use the framework, then they should go with Bootstrap.

Reducing the Complexity of Site Structure

The best way to reduce the cognitive load on a programmer is to match the abstraction used: document or application,? with the problem being solved.

Static Websites the Require High Visual Impact

If your website is best modelled as a collection of documents, you should strongly prefer a document oriented design style for all of your website. You organize the code around pages with links to each other. The is one stylesheet for the website that is modified as necessary to change the appearance of the site. This fits in the with the natural way in which the web was designed, and is extremely well supported by browsers and web-servers.? This gives you the best performance, with the greatest flexibility.? It is suitable for small websites that need to look distinctive, and may need to evolve in unanticipated ways.? Landing pages and home pages are a classic example of this type of website.

Sites that Require Rapid Development with a Focus on Basic Functionality

If you have document oriented website that does not need to look distinctive, and uses the simple standard components provided by a framework like Bootstrap, build a static site with HTML and Bootstrap+CSS to get the components you want.? Use plain Javascript, as necessary, to provide any minor interactivity that might be needed. This is suitable for prototypes, sites where the content is more important than visual appeal, or agency development where rapid results are a priority.

If you really need an application abstraction, and your application does not need a distinctive look and feel, and does not have the need for any complex component behaviour, using a CSS framework like Tailwind or Bootstrap combined with Javascript framework like React will serve your needs.

Data Focussed Websites with Standardized Visuals and Behaviour

If the application does not need to look distinctive, and uses a few standard but complex components (e.g. a graph widget etc.) it is best to use a library that combines multiple frameworks like a React UI library. MaterialUI and Ant Design come to mind.? The caveat here is that there is a steep learning curve to effectively using these UI libraries because, you have to progressively become competent with HTML, CSS, Javascript, a CSS framework like Bootstrap or Tailwind,? a Javascript framework like React and a UI library like MaterialUI.? Achieving competency can take many months. Typically, developers will pick a stack and become experts in it and use it whenever a project of this type arises. https://prismic.io/blog/react-component-libraries describes some of the popular UI component libraries.? Dashboards and many intranet applications? are good examples of the type of website that is best suited to this type of structure.

Small Sites Requiring High Visual Impact and Complex Functionality

If you have a small application that needs to look distinctive, and has some complex component behaviour, then try to model the application as a parallel collection of HTML, CSS, Javascript and backend components that model a single logical hierarchy of components.? For a reasonably small application, for example one consisting of about 5-10 functional components, it makes sense to eschew the use of frameworks entirely. You will get much better performance, and also lower the cognitive load of understanding and maintaining the application.? Small 3D model viewers,? data-visualization applications fit into this category of websites.

Large Sites with Complex Functionality that is more Important than Visual Appeal

If your application is large and has the need for complex non-standard components, but you don’t need a distinctive look and feel, you should start with a CSS framework like tailwind, a Javascript framework like React and a React UI library like Material UI. Then you will need to invest in building out custom UI components that fit with the look and feel of the standard components that your UI library provides. This style of design is useful for large Internet facing applications, sites like LinkedIn, Pexels, and most banking web applications fit well into this structure.

Large True Applications

Finally for large and true applications like Figma or a web-based CAD application, which need a distinct look and feel, have complex non-standard components, have high performance requirements, a custom framework that integrates with #WebAssembly is probably the best option.

Web Components: The future that has arrived behind schedule

One way to handle the complexity of modern web applications is define Web standards that makes it easy to build frameworks that are performant and allow the integration of HTML, CSS and Javascript into a single logical component that is natively supported by the browser.

Web Components are that standard. They are built into the browser and as of 2024, have generally evolved to the point of stability and widely supported by most modern browsers. ?The main problem with Web Components is that functionality is added very slowly. This is because, just like Javascript or HTML or CSS, any changes have to be widely supported not just by web browsers, but also by site developers.? The standardization process for new features for web-components is very slow.

There are other non-technical problems with Web components. Most developers are used to using a framework like React, Vue or Svelte, combined with Tailwind or Bootsrtrap. ?They will face a steep learning curve and a manager will face reluctance on part of developers to acquire the skill and will have trouble hiring for it.

However, If you are building a complex application that requires strong visual differentiation, good performance and complex functionality in 2024, it probably makes good sense to use web components as the foundation. ??Otherwise, using existing frameworks make sense, until the state of the art has evolved to the point where web-components are widely used, widely understood, and widely incorporated into popular frameworks.