5 ms·

Yeah let's do that. You have everything related to your component on place instead of jumping between files.

by h4x0rr 7mo ago

lawn 7mo ago
Is jumping between files supposed to be difficult or something?
- runarberg 7mo ago
  Also modern CSS is often written in a <style> tag either in a native web component or in a framework which supports single file component like vue or svelte.
- chrisweekly 7mo ago
  Colocation is a useful principle in component-based architecture.
  - apsurd 7mo ago
    In my lived experience, shared components just become another problem. Especially in a fledgling company, the iteration velocity is actually negatively affected by shared libs because there's always overhead to (not) break legacy. so shared components bloat to address every evolving need. And now with AI generated code i see so many wrapper patterns that forward endless props down, it's crazy! TLDR: i almost always end up branching out into evergreen "reusable" components anyway. Very unlikely the component library the CTO asked claude to DRY up the code with, is the one to rule them all.
    - halfcat 7mo ago
      FWIW, “colocation in component-based architecture” doesn’t necessarily mean shared code. It can just mean the one thing has all of its parts in one place, instead of having HTML in one file, CSS in another, JS in another. You’re right about DRY and code reuse very often being a premiere (wrong) abstraction, which is usually more of a problem than a few copy/pastes, because premature wrong abstractions become entrenched and harder to displace.
  - temporallobe 7mo ago
    As much hate as it gets, this is one thing I like about Angular.
    - cush 7mo ago
      imo Angular would have won had it figured out a stronger path from v1 to v2
      - jamesfinlayson 7mo ago
        Angular is pretty decent in that it gives you everything you need (the concept of a page and routing, services etc) but one thing I'll give React is the simplicity of changes to attributes just triggering updates.
      - pjmlp 7mo ago
        From where I am standing it is mostly Angular or Next.js, both have separation of HTML and CSS by default, naturally they cannot block someone to come in and put tailwind on the project.
- afiori 7mo ago
  Without a lot of discipline it is very easy to end up with a css with lots of unclear and hard to guess effects. Eg consider the case of <A type=1><B><A type=2></A></B></A> where A and B are complex templates. Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Similarly a :has selector might catch a descendant of the wrong element. @scope fixes a lot of this, but it is a complex problem. With tailwind you mostly have to worry about inheritance
  - robertoandred 7mo ago
    This problem was solved a long time ago with CSS Modules.
    - christophilus 7mo ago
      I prefer almost anything to CSS modules, so this bike shedding topic is probably very subjective.
  - the_other 7mo ago
    > Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Then <a type=b> is potentially a <c>. Consider a small refactor?
- ewuhic 7mo ago
  Is staying in one file supposed to be difficult or something?
  - luckylion 7mo ago
    this is grey text from tailwindcss.com, I wouldn't call it easy and readable. <div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.</p></div>
    - what 7mo ago
      That’s actually disgusting.
      - paradox460 7mo ago
        It gets worse Check out the Netlify admin dashboard screenshot in my blog post https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-craftsmanship/#bigmess https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...
        troupo 7mo ago
        There's nothing in Tailwind that makes the craftsmanship dead, and your proposed solution with scoped styles somehow a revival of said craftsmanship. Note how your solution literally depends on a build tool (Vue) to work. Whereas Tailwind can work with no build tools (tailwind build tools removes unused classes, and that's mostly it). And then you go: --- start quote --- Juniors still come along and just do margin: 13px. In tailwind, they do m-[13px]. No difference. At least with CSS its centralized. --- end quote --- When your scoped CSS example is literally decentralized per-file CSS that has `margin: 5px` in it. That gets compiled into a meaningless `class-678x8789g` by the build tool. > The people I've seen who are most excited over tailwind are generally those that would view frontend as something they have to do, not something they want to do. Tailwind is the product of its era: where even sites are composed out of components. That is, this separation of concerns: https://x.com/simonswiss/status/1664736786671869952 https://x.com/simonswiss/status/1664736786671869952 As a comparison, here's Youtube's expertly crafted CSS (which is actually an improvement over their original 6B file). Note how much endless repetition there is: https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb.kevlar_base.D3GEurry95Y.L.W1.O/am=AACAAIAAAg0/d=0/br=1/rs=AGKMywHlqLEnoES9HlRgWKxLMqdaAP827Q https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb...
- dbbk 7mo ago
  You can literally command click a class to go into a styled components css file. I do not understand what the big issue is.
  - halfcat 7mo ago
    Cognitive load of looking at 12 open files trying to understand what’s happening. Well, in fairness some of those 12 are the same file because we have one part for the default CSS and then one for the media query that’s 900 lines further down the file.
    - bobthepanda 7mo ago
      Css modules gets away from the larger sins of the massive global css files. If modules had existed much earlier it probably would’ve gotten rid of most of the awfulness.
      - UqWBcuFx6NV4r 7mo ago
        Oh, great. So let’s just 2x all our files then! All for, what exactly? It sounds like you just want to write Java.
        bobthepanda 7mo ago
        If you have a complaint about your styles being so complicated and in a giant 900 line mega file, I don’t see how you address physical size other than breaking up the file. Granted, nesting support was also added fairly recently in the grand scheme of things, which boggles the mind given how it was such an obvious problem and solution that CSS preprocessing came about to address it.
      - agos 7mo ago
        CSS Modules are way older than Tailwind, but alas it was not enough
    - dbbk 7mo ago
      What do you mean 12 files? It’s 2 files. One for your component and one for its styles module.
- onion2k 7mo ago
  Yes. The problem is that the styles for something can be defined in multiple places, and that makes it hard. Especially with CSS and (potentially) having specificity issues if things aren't managed well. Having them as a part of the component means that problem goes away.
- mattacular 7mo ago
  I find it to be more difficult. Especially if I can't pane the files in view comfortably (ie. beyond 2 or 3 it gets significantly harder to work across them). Some frameworks or coding styles really lean into having lots of tiny files. That necessitates a more complicated directory structure for the project. Locating files eventually tends to requires search capability rather than being able to look through the tree in a sidebar. None of this is "hard" per se but I find the opposite is nicer to work with typically.
paradox460 7mo ago
Vue, Svelte, and Surface manage to do this without forcing you to inline all your styles
- h4x0rr 7mo ago
  I worked with both. Scoped styles are nice. Tailwind is better - no naming of every element, no mental tax of jumping around in the file -
- Kiro 7mo ago
  Jumping up and down in the file is not much better and you still need to come up with names for classes. I want to look at an element and immediately know how it's styled.
  - agos 7mo ago
    From Tailwind's home page: <div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10">[...] "immediately" is a stretch
    - Kiro 7mo ago
      You can fold it, format it, and IDEs preview it. This is like me posting the equivalent CSS in one big line. But even without all that I still prefer this over dealing with cascading styles in stylesheets. Never again.
      - agos 7mo ago
        dealing with the cascade and tailwind are not the only two options
    - rafark 7mo ago
      Thanks for proving the point. I haven’t even seen that element rendered and I already have a good mental picture of what it is and what it looks like.
zelphirkalt 7mo ago
What stops you from doing the same thing in CSS? It is trivial to assign a specific CSS class to an element that is the root node of a "component" and scope rules under that.

Yeah let's do that. You have everything related to your component on place instead of jumping between files.

by h4x0rr 7mo ago

Yeah let's do that. You have everything related to your component on place instead of jumping between files.

lawn 7mo ago

Is jumping between files supposed to be difficult or something?

runarberg 7mo ago
Also modern CSS is often written in a <style> tag either in a native web component or in a framework which supports single file component like vue or svelte.
chrisweekly 7mo ago
Colocation is a useful principle in component-based architecture.
- apsurd 7mo ago
  In my lived experience, shared components just become another problem. Especially in a fledgling company, the iteration velocity is actually negatively affected by shared libs because there's always overhead to (not) break legacy. so shared components bloat to address every evolving need. And now with AI generated code i see so many wrapper patterns that forward endless props down, it's crazy! TLDR: i almost always end up branching out into evergreen "reusable" components anyway. Very unlikely the component library the CTO asked claude to DRY up the code with, is the one to rule them all.
  - halfcat 7mo ago
    FWIW, “colocation in component-based architecture” doesn’t necessarily mean shared code. It can just mean the one thing has all of its parts in one place, instead of having HTML in one file, CSS in another, JS in another. You’re right about DRY and code reuse very often being a premiere (wrong) abstraction, which is usually more of a problem than a few copy/pastes, because premature wrong abstractions become entrenched and harder to displace.
- temporallobe 7mo ago
  As much hate as it gets, this is one thing I like about Angular.
  - cush 7mo ago
    imo Angular would have won had it figured out a stronger path from v1 to v2
    - jamesfinlayson 7mo ago
      Angular is pretty decent in that it gives you everything you need (the concept of a page and routing, services etc) but one thing I'll give React is the simplicity of changes to attributes just triggering updates.
    - pjmlp 7mo ago
      From where I am standing it is mostly Angular or Next.js, both have separation of HTML and CSS by default, naturally they cannot block someone to come in and put tailwind on the project.
afiori 7mo ago
Without a lot of discipline it is very easy to end up with a css with lots of unclear and hard to guess effects. Eg consider the case of <A type=1><B><A type=2></A></B></A> where A and B are complex templates. Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Similarly a :has selector might catch a descendant of the wrong element. @scope fixes a lot of this, but it is a complex problem. With tailwind you mostly have to worry about inheritance
- robertoandred 7mo ago
  This problem was solved a long time ago with CSS Modules.
  - christophilus 7mo ago
    I prefer almost anything to CSS modules, so this bike shedding topic is probably very subjective.
- the_other 7mo ago
  > Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Then <a type=b> is potentially a <c>. Consider a small refactor?
ewuhic 7mo ago
Is staying in one file supposed to be difficult or something?
- luckylion 7mo ago
  this is grey text from tailwindcss.com, I wouldn't call it easy and readable. <div class="relative before:absolute before:top-0 before:h-px before:w-[200vw] before:bg-gray-950/5 dark:before:bg-white/10 before:-left-[100vw] after:absolute after:bottom-0 after:h-px after:w-[200vw] after:bg-gray-950/5 dark:after:bg-white/10 after:-left-[100vw]"><p class="max-w-(--breakpoint-md) px-2 text-base/7 text-gray-600 max-sm:px-4 dark:text-gray-400">Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.</p></div>
  - what 7mo ago
    That’s actually disgusting.
    - paradox460 7mo ago
      It gets worse Check out the Netlify admin dashboard screenshot in my blog post https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-craftsmanship/#bigmess https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...
      - troupo 7mo ago
        There's nothing in Tailwind that makes the craftsmanship dead, and your proposed solution with scoped styles somehow a revival of said craftsmanship. Note how your solution literally depends on a build tool (Vue) to work. Whereas Tailwind can work with no build tools (tailwind build tools removes unused classes, and that's mostly it). And then you go: --- start quote --- Juniors still come along and just do margin: 13px. In tailwind, they do m-[13px]. No difference. At least with CSS its centralized. --- end quote --- When your scoped CSS example is literally decentralized per-file CSS that has `margin: 5px` in it. That gets compiled into a meaningless `class-678x8789g` by the build tool. > The people I've seen who are most excited over tailwind are generally those that would view frontend as something they have to do, not something they want to do. Tailwind is the product of its era: where even sites are composed out of components. That is, this separation of concerns: https://x.com/simonswiss/status/1664736786671869952 https://x.com/simonswiss/status/1664736786671869952 As a comparison, here's Youtube's expertly crafted CSS (which is actually an improvement over their original 6B file). Note how much endless repetition there is: https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb.kevlar_base.D3GEurry95Y.L.W1.O/am=AACAAIAAAg0/d=0/br=1/rs=AGKMywHlqLEnoES9HlRgWKxLMqdaAP827Q https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb...
dbbk 7mo ago
You can literally command click a class to go into a styled components css file. I do not understand what the big issue is.
- halfcat 7mo ago
  Cognitive load of looking at 12 open files trying to understand what’s happening. Well, in fairness some of those 12 are the same file because we have one part for the default CSS and then one for the media query that’s 900 lines further down the file.
  - bobthepanda 7mo ago
    Css modules gets away from the larger sins of the massive global css files. If modules had existed much earlier it probably would’ve gotten rid of most of the awfulness.
    - UqWBcuFx6NV4r 7mo ago
      Oh, great. So let’s just 2x all our files then! All for, what exactly? It sounds like you just want to write Java.
      - bobthepanda 7mo ago
        If you have a complaint about your styles being so complicated and in a giant 900 line mega file, I don’t see how you address physical size other than breaking up the file. Granted, nesting support was also added fairly recently in the grand scheme of things, which boggles the mind given how it was such an obvious problem and solution that CSS preprocessing came about to address it.
    - agos 7mo ago
      CSS Modules are way older than Tailwind, but alas it was not enough
  - dbbk 7mo ago
    What do you mean 12 files? It’s 2 files. One for your component and one for its styles module.
onion2k 7mo ago
Yes. The problem is that the styles for something can be defined in multiple places, and that makes it hard. Especially with CSS and (potentially) having specificity issues if things aren't managed well. Having them as a part of the component means that problem goes away.
mattacular 7mo ago
I find it to be more difficult. Especially if I can't pane the files in view comfortably (ie. beyond 2 or 3 it gets significantly harder to work across them). Some frameworks or coding styles really lean into having lots of tiny files. That necessitates a more complicated directory structure for the project. Locating files eventually tends to requires search capability rather than being able to look through the tree in a sidebar. None of this is "hard" per se but I find the opposite is nicer to work with typically.

paradox460 7mo ago

Vue, Svelte, and Surface manage to do this without forcing you to inline all your styles

h4x0rr 7mo ago
I worked with both. Scoped styles are nice. Tailwind is better - no naming of every element, no mental tax of jumping around in the file -
Kiro 7mo ago
Jumping up and down in the file is not much better and you still need to come up with names for classes. I want to look at an element and immediately know how it's styled.
- agos 7mo ago
  From Tailwind's home page: <div class="h-112 p-4 sm:p-8 relative overflow-hidden rounded-lg bg-gray-950/[2.5%] after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:inset-ring after:inset-ring-gray-950/5 dark:after:inset-ring-white/10 bg-[image:radial-gradient(var(--pattern-fg)_1px,_transparent_0)] bg-[size:10px_10px] bg-fixed [--pattern-fg:var(--color-gray-950)]/5 dark:[--pattern-fg:var(--color-white)]/10">[...] "immediately" is a stretch
  - Kiro 7mo ago
    You can fold it, format it, and IDEs preview it. This is like me posting the equivalent CSS in one big line. But even without all that I still prefer this over dealing with cascading styles in stylesheets. Never again.
    - agos 7mo ago
      dealing with the cascade and tailwind are not the only two options
  - rafark 7mo ago
    Thanks for proving the point. I haven’t even seen that element rendered and I already have a good mental picture of what it is and what it looks like.

zelphirkalt 7mo ago

What stops you from doing the same thing in CSS? It is trivial to assign a specific CSS class to an element that is the root node of a "component" and scope rules under that.