4 ms·

Why is InlineStack any more semantic than say FlexDiv? Semantics is at some point arbitrarily agreed upon and memorized.

dsego 2y ago
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.
- isleyaardvark 2y ago
  > 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.
iammrpayments 2y ago
I instead use <div class=“flex”><\div> now. 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
- biohacker85 2y ago
  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>
  - dsego 2y ago
    Not sure why it matters, <b> is the same as <span style="font-weight: bold">... If you want, name it "stack" or "vbox" instead of "flex".
nfw2 2y ago
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.

dsego 2y ago

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.

isleyaardvark 2y ago
> 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.

iammrpayments 2y ago

I instead use <div class=“flex”><\div> now. 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

biohacker85 2y ago
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>
- dsego 2y ago
  Not sure why it matters, <b> is the same as <span style="font-weight: bold">... If you want, name it "stack" or "vbox" instead of "flex".

nfw2 2y ago

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.