Hacker News Reader

Comment by zarzavat | Hacker News Reader

Thank for for sticking up for external stylesheets.

When I was starting out with HTML, inline styles were considered to be a hack, and the goal of writing good HTML was to separate the data from the presentation as completely as possible. It seems that nowadays people place more emphasis on encapsulation rather than separation, they want their style to live with the component. Separation and encapsulation are in opposition: vertical vs horizontal architecture of code.

Personally I prefer separation. While components are a good way to divide up functionality, when it comes to presentation users are perceiving the UI of your entire website, not the individual UIs of each component. Separating the style into a stylesheet gives you global control over presentation and makes you more aligned with how the user is perceiving things.

View on HN

> Separating the style into a stylesheet gives you global control over presentation and makes you more aligned with how the user is perceiving things.

This only works for trivial stuff. Presentation is more than just colors, fonts and margins. Layout is deeply intertwined with the structure your HTML, attempts at mitigating this have made a monumental mess of CSS. The sooner you recognize it as the pipe dream that it is, the more time you will have to work on your actual goal.

I also feel the opposite about what the user perceives. The user perceives the result of applying all your CSS rules - which is closer to inline styles everywhere rather than separating things out.

> Separating the style into a stylesheet gives you global control over presentation and makes you more aligned with how the user is perceiving things.

Can you elaborate on this? Do you mean that the separation through external stylesheets creates a more cohesive UI for the user?

The HTML has its say on layout part, so the presentation is not exclusively on the CSS. Also, the core part of defining the whole UI is usually delegated to some global CSS rules, usually known as the theme in CSS-in-JS libraries. I don't think having external stylesheet helps that much.

This is a really good observation. If I can add on, I feel like a lot of the disagreements in modern front end development boil down to this: Some people actually like developing with HTML/CSS, and other people see it as an implementation detail and would rather abstract it away with JavaScript.

People in the first camp tend to like Vue, CSS/Sass, Htmx, server rendering, etc.

People in the second camp like React and React Native, CSS-in-JS, Tailwind, etc.

I don't agree with that separation. I feel that e.g. Tailwind appeals a lot to developers of templates for e.g. Laravel.

And I like to be an expert in HTML+CSS (at least I try), and still prefer JSX to e.g. Vue's template syntax.

It's a tradeoff, prototyping speed vs maintenance

prototype (or throwaway code you don't care about)? JS and tailwind something you have to maintain? TS and external stylesheet

Seems legit observation to me

Separation also has drawbacks. You have to go to open a different file and search for things by ID or class name. It’s like aspect oriented programming.

In almost every IDE you can open two files in a split view and you can ctrl-click on an ID to go to the definition.

That's not good enough. I want to look at a tag and immediately see how it's styled. No cascading or hidden/indirect styling. It should be all there, completely isolated from the rest. In fact, I should be able to copy/paste just the HTML (or component) into a completely different application and it should remain exactly the same.

Reply on news.ycombinator.com