4 ms·

Having separate html/css/js files is a good thing, I don't why you'd want to combine them?

by bogwog 5y ago

mrweasel 5y ago
That shipped has sailed long ago. I don't disagree, and I really don't want to work with any technology that mixes HTML and JavaScript, but that's not really how modern web frameworks view the world.
fayten 5y ago
I agree, in fact I wish there was one more layer that separated layout from styling. Keep padding, but tear out flex box, grid, margin, etc and have a VFL like language instead. Too be fair flex box and grid are pretty good. I just wish I didn't have to sometimes skim through huge CSS or SASS files to make layout changes.
- djrockstar1 5y ago
  Angular's flex-layout sort of achieves this? Where you can define the layout of the page within the template using flex attributes, but still have another file for css.
rkangel 5y ago
Except that in a lot of modern frameworks that separation has gone away - look at React components where the markup and styles usually live together.
- l30n4da5 5y ago
  really hate the direction React has gone with that.
DemocracyFTW 5y ago
Having them separate is not necessarily a good thing. Svelte for one collects all the HTML, JS and CSS that you need for a given component into a single file (that uses the original syntax for each language). You can still draw in code from external files, but otherwise your component is just 1 file to take care of. Components are largely isolated from each other so the `.foobar` class used in one component does not affect the `.foobar` used in another.
- lvncelot 5y ago
  Vue does the same thing with .vue files.
mumblemumble 5y ago
When Windows Presentation Foundation split layout, styling, and logic into three separate sets of files, it was a huge win for maintainability. I had my share of complaints about WPF, but it was never that. It was mostly that I wished the rules for how they interacted with each other were easier to understand. I feel the same way about html/css/jss. It's not the fundamental triumvirate that bothers me. And I'm fine with their respective syntaxes. My problem is that the semantics of the whole system is an ever-growing Gordian knot of accidental complexity. But that problem is very nearly unfixable, so I can't really blame anyone for tinkering with more superficial things instead.
Zababa 5y ago
I'm not sure, I think the idea of scoping HTML/CSS/JS at the same level is good for development. At least when you think in terms of "components", it's easy to see why you would want content, styling and behaviour together. Keeping things local makes everything easier in my experience. HTML also has that weird position where you have things like <video> or forms, which are not really content but entire components, but still lacks lots of things people expect from a component library.
l30n4da5 5y ago
It isn't really the fact that it is all in one file that is the problem for maintainability, imo, it is that all (html, js. css) are incorporated together into a single unit, with no way of breaking it up. Vue puts html, js, and css into the same file with their .vue files, and it works great, because they keep those things separate _within_ the file. Also, there is the ability to load each section from a separate file, as well, which works flawlessly.
- IshKebab 5y ago
  > and it works great It works okay, except that it makes all tooling much much more complicated because you have to deal with multi-language files, and the template is HTML so you get frequent type errors (TSX catches those at compile time).
  - l30n4da5 5y ago
    > It works okay, except that it makes all tooling much much more complicated because you have to deal with multi-language files So load those files as external, single-language files. Problem solved.
    - IshKebab 5y ago
      That would be extremely gross and wouldn't even work in some cases. E.g. a Javascript linter may rely on actual files in actual paths. And you can't do that for IDEs so you'll have to do a ton of extra work to get them to work with it. Not worth it.
jpfed 5y ago
Nazca's include mechanism allows you to separate your code in whatever way you find appropriate.
chakkepolja 5y ago
It maybe just that I am a millennial and lack experience, but for me component based approach is much better than all 3 in separate file, for both maintainability and code reuse.

Having separate html/css/js files is a good thing, I don't why you'd want to combine them?

by bogwog 5y ago

Having separate html/css/js files is a good thing, I don't why you'd want to combine them?

That shipped has sailed long ago. I don't disagree, and I really don't want to work with any technology that mixes HTML and JavaScript, but that's not really how modern web frameworks view the world.

fayten 5y ago

I agree, in fact I wish there was one more layer that separated layout from styling. Keep padding, but tear out flex box, grid, margin, etc and have a VFL like language instead. Too be fair flex box and grid are pretty good. I just wish I didn't have to sometimes skim through huge CSS or SASS files to make layout changes.

djrockstar1 5y ago
Angular's flex-layout sort of achieves this? Where you can define the layout of the page within the template using flex attributes, but still have another file for css.

rkangel 5y ago

Except that in a lot of modern frameworks that separation has gone away - look at React components where the markup and styles usually live together.

l30n4da5 5y ago
really hate the direction React has gone with that.

DemocracyFTW 5y ago

Having them separate is not necessarily a good thing. Svelte for one collects all the HTML, JS and CSS that you need for a given component into a single file (that uses the original syntax for each language). You can still draw in code from external files, but otherwise your component is just 1 file to take care of. Components are largely isolated from each other so the `.foobar` class used in one component does not affect the `.foobar` used in another.

lvncelot 5y ago
Vue does the same thing with .vue files.

mumblemumble 5y ago

When Windows Presentation Foundation split layout, styling, and logic into three separate sets of files, it was a huge win for maintainability. I had my share of complaints about WPF, but it was never that. It was mostly that I wished the rules for how they interacted with each other were easier to understand. I feel the same way about html/css/jss. It's not the fundamental triumvirate that bothers me. And I'm fine with their respective syntaxes. My problem is that the semantics of the whole system is an ever-growing Gordian knot of accidental complexity. But that problem is very nearly unfixable, so I can't really blame anyone for tinkering with more superficial things instead.

Zababa 5y ago

I'm not sure, I think the idea of scoping HTML/CSS/JS at the same level is good for development. At least when you think in terms of "components", it's easy to see why you would want content, styling and behaviour together. Keeping things local makes everything easier in my experience. HTML also has that weird position where you have things like <video> or forms, which are not really content but entire components, but still lacks lots of things people expect from a component library.

l30n4da5 5y ago

It isn't really the fact that it is all in one file that is the problem for maintainability, imo, it is that all (html, js. css) are incorporated together into a single unit, with no way of breaking it up. Vue puts html, js, and css into the same file with their .vue files, and it works great, because they keep those things separate _within_ the file. Also, there is the ability to load each section from a separate file, as well, which works flawlessly.

IshKebab 5y ago
> and it works great It works okay, except that it makes all tooling much much more complicated because you have to deal with multi-language files, and the template is HTML so you get frequent type errors (TSX catches those at compile time).
- l30n4da5 5y ago
  > It works okay, except that it makes all tooling much much more complicated because you have to deal with multi-language files So load those files as external, single-language files. Problem solved.
  - IshKebab 5y ago
    That would be extremely gross and wouldn't even work in some cases. E.g. a Javascript linter may rely on actual files in actual paths. And you can't do that for IDEs so you'll have to do a ton of extra work to get them to work with it. Not worth it.

jpfed 5y ago

Nazca's include mechanism allows you to separate your code in whatever way you find appropriate.

chakkepolja 5y ago

It maybe just that I am a millennial and lack experience, but for me component based approach is much better than all 3 in separate file, for both maintainability and code reuse.