[aleksiy123]

I think this assertion is where most of the conflict comes from.

There is a fair amount of people that disagree with the premise that it should be separated in that way (Including me).

I personally like this essay by the author of htmx on the topic

https://htmx.org/essays/locality-of-behaviour/

Also just better composition imo.

Practically I think this means components of scoped css, html, js.

People never seem to have the same complaint about mixing or separating app code and sql in the same way?

[wwweston]

> it is important to make the distinction between inlining the implementation of some behaviour and inlining the invocation (or declaration) of some behaviour

tailwind’s biggest problem is that it doesn’t make this distinction well.

In a sense this is a strength because it probably matches the amount of effort most devs/orgs who don’t focus here are willing to put in to the problem; this worse-is-better solution is functional enough especially in settings where component separation has already been adopted. Along with some decent baseline design tokens, it’s enough for people who don’t want to care more, especially if they don’t ever particularly see the consequences of hyperlocalizing implementation.

If your project has someone whose job it is to think through design systems and how they’re expressed via CSS, you can do better. If you don’t, you can do worse.

And personally, I’ve seen a LOT of discussion about separating SQL and app code. There’s a similar tension. Wrapping queries in function calls often means fewer duplicated queries (often painfully verbose) and opportunities for dumb security mistakes, but reduces the expressive variation the raw query language provides, and many systems and devs behind them end up pursuing balance between the two… or outsourcing the decision to an ORM or other data access layer whose tradeoffs also probably have shortcomings but at least they get to worse-is-better stop thinking about it except at particular pain points.

[timr]

There’s absolutely no tension between locality of behavior and separation of concerns in CSS: you’re putting styles on the elements in the document. The styles are defined elsewhere.

It’s like arguing that all of your source code should go in one big file because one file is less than two files, which means greater localization.

[aleksiy123]

Its arguing that that source code that affects the behaviour of something should be easily discoverable from the point/points its behaviour affects. or alternatively more indirection/obfuscation is worse.

Its not so much about same file, as reducing distance to understanding, whether visually or by some sort of easily traceable path.

Like you would want to init a variable closer to its usage, Or that having a 100 wrapper functions is less understandable than inlining for a single statement, or global mutations are harder to trace then local, and that sometimes its easier to inline a single sql statement then split it out into a different file just because its 2 different languages.

Also, to be clear its possible to write CSS that exhibits less or more LoB. The file thing is more that I don't think HTML, CSS, JS "must" be written as separate files which is what the prevailing best practice used to be, justified as SoC. I just think splitting along the scope/behaviour lines rather than file type is more understandable.

[mcv]

> the behaviour of something should be easily discoverable from the point/points its behaviour affects. or alternatively more indirection/obfuscation is worse.

This is why I'm not that big of a fan of Tailwind and similar frameworks. To me it feels like they introduce yet another language into the mix. It adds all sorts of classes directly to the html, but now I need to understand what all of those mean. If I write my own CSS, I generally just have to look in one place to understand the styling of an element.

I think I feel kind of like that about overuse of annotations in Java. (Simple/obvious ones are fine, but not all are simple and obvious.)

[timr]

> Its not so much about same file, as reducing distance to understanding, whether visually or by some sort of easily traceable path.

The metaphor remains valid. You can do this all the way down the abstraction stack, back to functions.

[mcv]

I separate those too. Queries get their own file. Sometimes their own framework.

[aleksiy123]

Sorry maybe that wasn’t the best example. It’s not really about separation of files. But how they connect.

In sql your code may be in a seperate file but your app code is still clearly calling the sql. The inlining vs not inlining is just abstraction. You could use a function, or a separate file or not, a different language or not.

But there is a clear single call chain at the points where that behaviour is being applied and a single definition.

With css that’s not necessarily true. There’s a bunch of different rules that may or may not apply.

[skydhash]

> With css that’s not necessarily true. There’s a bunch of different rules that may or may not apply.

There's only one algorithm, the cascade. And it's described here[0].

And just like any code you write, try not to write complex selectors. If you're not sure two styles are equal, it's better to write two different rules. And just like styling works in any system, you go from generic (standard html elements) to very specific ones (the link in the hero section of the about page)

[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Casc...

[aleksiy123]

that’s exactly the part that is anti locality of behaviour.

I don’t want/need cascade. I only care about components and building up from them. And I would rather have it be explicit over implicit and scoped/encapsulated.

Call it composition over cascade.

To be clear I think it’s possible to do this without tailwind. And tailwind has other out of the box features/opinions.

But it works well enough without too much friction.

[skydhash]

> that’s exactly the part that is anti locality of behaviour.

It is not. Because it fits the concept of "web pages" as documents and forms (which most web apps are, even if they're trying to pass as desktop applications.

> I don’t want/need cascade. I only care about components and building up from them. And I would rather have it be explicit over implicit and scoped/encapsulated.

And you're very welcome to do what you want. But there's no need to bash cascading as it's a good solution for web pages.

[aleksiy123]

End users and even other programs/extensions can load rules to alter your styles. I think thats about as opposite of locality of behaviour as it gets. (no judgment on customization on being good/bad).

With the rest I don't really strongly disagree. I think its just a question of complexity. For simple things its fine, but for complex apps with teams of people :shrug: