Comment by resonious
4 years ago
Personally I've always been kind of confused by the common best practice of separating everything. React and Vue single file components made so much sense to me.
I guess if I were to rationalize my position, I'd say it's because I have a hard time finding related things when they're separate. If a button or "a" tag have a special click handler, I want to know when looking at it. If it just has classes, then I don't know if that are for style or if they're for behavior. I know there are some conventions out there where you prefix classes with "js-" etc, but if you just use "onclick" then it's obvious and you don't need a convention.
Personally I think it's not so much about separation of concerns/technologies per se, it's that this debate boils down to a different debate under the hood: the one about folder-by-type vs folder-by-feature[0].
The gist is that folder-by-feature is generally preferrable because it requires less context switching (in the literal sense of jumping between multiple different far away folders and scanning each for the thing you're looking for)
Single file components force you to organize code in a folder-by-feature structure, to a large extent. You can use folder-by-feature structure alongside with separation of technologies, it's just not that common to see it because the tooling to support it is not quite as optimized.
[0] https://softwareengineering.stackexchange.com/questions/3385...
> You can use folder-by-feature structure alongside with separation of technologies, it's just not that common to see it
Angular is a pretty good example of this. The HTML, CSS, unit tests, and code are all in separate files, but they have the same base name and are grouped together in the same place.
It's fine if you have a few colors, but with 50+ lines of SASS/component I'd rather have them separately.
> I have a hard time finding related things when they're separate.
Store them in the same directory?
I agree on the events/business logic that they make sense to couple with the template code.
With something like Svelte, I see no reason an editor couldn't let me choose if I want to see the JS/HTML/CSS in the single file (as it is on disk) or split it up into separate editor tabs for me.
And have to switch between three files back and forth?
I usually split my IDE to multiple planes. A 4k, large monitor helps though :)
For their demo https://imba.io/ they put styles in a separate file, how so?
What? How is that a problem, why would it be something that's best avoided, and why simply displaying all three files at once in one of a million ways available is not a solution?
7 replies →
Or up and down in one file.