3 ms·

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

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.

sonnhy 3y ago
> 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.
shrimpx 3y ago
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.
- niutech 3y ago
  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.
  - Kiro 3y ago
    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.
jacobsimon 3y ago
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.
- moritzwarhier 3y ago
  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.
  - jokethrowaway 3y ago
    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
- tipiirai 3y ago
  Seems legit observation to me
deleted 3y ago
[deleted]
incrudible 3y ago
> 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.

sonnhy 3y ago

> 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.

shrimpx 3y ago

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.

niutech 3y ago
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.
- Kiro 3y ago
  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.

jacobsimon 3y ago

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.

moritzwarhier 3y ago
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.
- jokethrowaway 3y ago
  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
tipiirai 3y ago
Seems legit observation to me

deleted 3y ago

[deleted]

incrudible 3y ago

> 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.