The fragmentation this creates is not worth it, we're building the tower of Babel of web technologies. If you look at 'modern' web applications every html component is rephrased into something like this 'inlinestack' crap.
The tower of Web Babel was built 5 years ago during peak React. It’s gotten better tbh as more competition has creeped into the web space due to React dropping the ball and resting on their laurels.
While I understand the gut reaction to seeing something like InlineStack, it’s not any different than a utility class except the abstraction has been made on the component level instead of the CSS level within a bunch of different components. The other thing is that these types of components provide a layer for abstraction that extends beyond the web. If I’m writing a app that targets web and native mobile, I can let the compiler decide which version to place in the build to take advantage of native features of the platform.
At a certain scale, programming becomes about maintaining consistency at said scale and less about the craftsmanship of an individual component. As a developer who also enjoys writing CSS and building layouts myself by hand, I understand your frustration but it’s misguided towards a group of developers who are trying to solve different problems.
We don’t need to implement everything that FAANG comes up with in their “innovation labs” and I 100% believe that there is a place for handcrafted code in applications for decades to come. But let’s not lose site of the fact that table saws haven’t replaced hand saws. They serve different purposes for different audiences and that’s okay!
Not to be pedantic, but I am legitimately confused about how the babel of tower metaphor is being used here. In biblical lore, the flaw of the tower of babel was that it too successful as a unifying project. Is this what you mean in regards to react? It seems that other comment meant the opposite.
It's not, FlexDiv is just another name for Stack, they are describing the same aspect. Eg. you can imagine one CSS library using Flex, one Group and the third one Stack for the same concept, eg. some other UI frameworks use VBox and HBox. But it is still different from TopSectionHeader, SectionHeaderInner, SectionBodyWrapper, or whatever other names you have to come up with to give your component "semantic" meaning according to their content.
> to give your component "semantic" meaning according to their content.
This is one of the biggest pros for Tailwind, is that it leads people away from this misbegotten mindset. The scare quotes around "semantic" are right. It's amazing how many of the same people stress separation of concerns to separate content from presentation, then turn around and name the presentation after the content.
Because flex just references the layout engine, and div intentionally has no semantic meaning. Fwiw I don't think InlineStack is a particularly good name either, but the criticism of this needs more justification than just "it's not how we did things in the past".
Semantics evolve over time. This is true of natural language and coding practice.
If the class name is not enough for me to guess, I just hover the class name and the LSP will show me the applied styles.
Another issue is that Shopify changes the name of these components for no reason, for example InlineStack was once called Inline, then HorizontalStack, then InlineStack, while the flex box model hasn’t change since 2012
Naming things is hard but I feel like there is something odd about a class name referencing a single CSS property as it is basically an inline style:
<div style=“display: flex”></div>
