Konsta UI – Mobile UI Components Built with TailwindCSS • Hacker News Board

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#201

Post by satvikpendem » Fri, Feb 24, 2023, 5:41 PM UTC

dmitriid wrote: post #197

satvikpendem wrote: post #84

Earlier quoted context omitted.

So, the same as Tailwind then? That's also why I'd consider Tailwind a write only language, except with CSS you at least have the chance of organizing it properly.

> So, the same as Tailwind then? Worse. With Tailwind you have a consistent set of classes scoped usually per component. Thos p-x, m-x, and others don't change from component to component or from project to project. Hell if I know what `.chip-text__content` is, how it's different from `.icon-button__content`, why it interferes with my CSS, and what other 15 CSS classes I need on top of that to make it work.

I think there is a disconnect between what I'm talking about regarding CSS and what everyone else is. Yes, BEM and global styling is unmaintainable, I agree with you there. However these days even with Tailwind their approach is to componentize. In the same way, I can just use CSS modules with no global styles and get the same benefits of scoped styling like Tailwind provides without having something else break as a result of what I use in the current component. However, if you're using HTML without a JS framework, Tailwind can be superior to BEM and global styles, but still not as much as CSS modules, CSS-in-TS, and the like, due to maintainability concerns.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#202

Post by satvikpendem » Fri, Feb 24, 2023, 5:44 PM UTC

jen20 wrote: post #190

satvikpendem wrote: post #39

Earlier quoted context omitted.

Using it wrong on every codebase that wasn't even made by me but instead by my employers? If it's happening that many times, the tool is to blame. More likely that the people who use it and like it (for now) have never have to handle large amounts of components and refactoring them. It's basically impossible. Trends come and go, who's to say that in a few years we decide, like jQuery, that hey, maybe this utility fir…

> Using it wrong on every codebase that wasn't even made by me but instead by my employers? If it's happening that many times, the tool is to blame. You could say that about chainsaws lopping off arms. Perhaps the user is not sufficiently competent to use the tool correctly…

If chainsaws are popping off arms, then maybe we should have safety features, you know, like many blade driven devices already do these days. Again an example of a tool that evolves to meet users' needs instead of resorting to "you're using it wrong," this is a basic principle of product design.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#203

Post by satvikpendem » Fri, Feb 24, 2023, 5:48 PM UTC

Kiro wrote: post #183

satvikpendem wrote: post #171

Earlier quoted context omitted.

That's nice for you. Similarly, I cannot take anything recommending copy pasting code seriously either, and I'm sure you understand that it would be futile trying to convince me otherwise. I wouldn't take anyone doing that seriously, and similarly I can't take you seriously.

The difference here is that we're not trying to force you to use Tailwind. You asked "What is it about everyone using Tailwind?" and we responded, but you refuse to accept our answers and keep arguing that we're uninformed and wrong for using something we love. Your copy pasting analogy makes no sense because "syntax highlighting" was referring to you trying to convince me to stop using something I can't live without…

I don't think you understood the analogy in what I was saying. The finality of your statements regarding you being unable to take me seriously is the exact same thing I could say to you, which is why I phrased it the way I did. You like Tailwind, fine, use it. I don't, but don't try to convince me to use it, just like there's no way I could convince you to not use syntax highlighting.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#204

Post by satvikpendem » Fri, Feb 24, 2023, 5:50 PM UTC

zmxz wrote: post #179

satvikpendem wrote: post #124

Earlier quoted context omitted.

Okay, as you tell me there is nothing I can say to convince you of detractors to your opinions, there is no need for me to talk to you further.

I asked for numbers, which you don't have. Had you read what's written, you'd see it. That would convince anyone, and does not require me to trust a random stranger with ego issues. Self-proclaimed professional like you should not skim text. You miss the point that way.

> You can assure me with the might of 1000 exploding suns, but it STILL means nothing

> I'd say that you are consuming resources which gather people who run into problems due to their lack of knowledge, such as stackoverflow.com so yes, the pattern you'll see is problems.

Whatever numbers I give you will be unconvincing to you, is what I meant. So why should I try to convince you, when you yourself also pull No True Scotsman if I tell you I worked with good engineers who knew what they were doing? You will just say I am "consuming the wrong resources." Anything I say will not convince you.

Therefore there is nothing I could say to convince you further.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#205

Post by twism » Fri, Feb 24, 2023, 5:58 PM UTC

Aeolun wrote: post #192

twism wrote: post #189

Earlier quoted context omitted.

Problem is tailwind is not hard to maintain. I would argue it's easier. Folks look at it and it looks like a nightmare (the documentation even says so) but you have to actually give it a fair shake. I can always jump back into a tailwind codebase and not only do I know what mr-4 does I know where it is when looking at the rendered component. You find yourself having to do "Right click > inspect" a whole lot less ofte…

> You find yourself having to do "Right click > inspect" a whole lot less often to figure out what's going on Instead I find myself going to the Tailwind docs to find out how they renamed this random css property. But it’s still better than plain CSS.

i do that same with just css. it's not every day i use good ol' plain css scroll-behavior: revert-layer;

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#206

Post by satvikpendem » Fri, Feb 24, 2023, 5:59 PM UTC

frosted-flakes wrote: post #199

satvikpendem wrote: post #151

Earlier quoted context omitted.

Your last paragraph is precisely what my point is. I simply don't understand why people like the indirection. Sure, it feels amazing to clap together a few classes and not have to think about naming them, until you later find that you don't know what the hell a given div is and have to spend a bunch of time parsing the one long line of Tailwind classes. If you try grouping the Tailwind classes using @apply for readab…

When I come back to a bit of code I haven't looked at for a long time, I find the class names I set on the individual elements extremely helpful, like comments that never go out of date. I can immediately orient myself and know which classes to look at (I use scoped/namespaced classes; not like BEM which is too dependent on HTML structure, just a namespace with the element class, like .Banner-icon). I've never fully…

That's a good way to do it personally, and I might start taking that approach too. The Tailwind syntax for some of the more complex stuff is appalling.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#207

Post by satvikpendem » Fri, Feb 24, 2023, 6:04 PM UTC

agloe_dreams wrote: post #185

omnimus wrote: post #178

Earlier quoted context omitted.

If you look how marketing teams / agencies use tailwind its exactly for it's ability to customize. Utility frameworks in the past (like Tachyons) were not very useful for them because they didn't have the customization. Every project starts with config and many things are turned off. Not only colors but also for example typography is too constrained in TW by default and it's better to make your own utility classes fo…

I’m fine with a find and replace at build time with xl:text-bold xl:p-4 for that very reason, that would be my expectation. Yes you can make utility classes for typography styles..that’s entirely the point of extending the framework, they are extremely clear that you should even. None of this precludes the idea that it is configurable to the point of making it a better solution for one’s needs. Personally the vanilla…

VE is a SCSS substitute for those that like TypeScript instead of SCSS as a language, you can do the same stuff in either one. They even have custom utility classes too. Why I like it is it enforces a design system onto your code. In the Tailwind world the library CVA does the same thing so it's not a novel concept.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#208

Post by satvikpendem » Fri, Feb 24, 2023, 6:11 PM UTC

deergomoo wrote: post #184

satvikpendem wrote: post #34

What is it about everyone using Tailwind? It inevitably becomes a mess in every codebase I've used it in; it's like Perl, a write only language. I just use Vanilla Extract (with their Sprinkles API) and call it a day, it uses TypeScript as the preprocessor language and then compiles it to raw CSS, similar to SCSS but without writing SCSS. https://vanilla-extract.style

> a write only language This is exactly the situation Tailwind prevents . Unless your team has incredible discipline, CSS across a large system very often becomes a tangled mess where you can’t change one thing without unintentionally affecting another. When you change the Tailwind classes on an element, you know there’s no risk of subtly breaking something somewhere else. Don’t conflate “visually busy” with “unmaint…

If you're using global CSS or BEM etc, you're right, Tailwind sounds like a dream. I work in React apps however where CSS modules or CSS-in-TS already solves the scoping problem for us. So now we're left with just the "visually busy" part that's unmaintainable and not better than CSS classes.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#209

Post by satvikpendem » Fri, Feb 24, 2023, 6:12 PM UTC

nailer wrote: post #181

Kiro wrote: post #98

Earlier quoted context omitted.

What you describe is not representative of how CSS is maintained in most companies. You always end up in a situation where it's impossible to track down what styles affect what elements so you start overriding and duplicating because you're afraid to touch existing CSS.

Svelte, which is fairly mainstream these days looking at state of js, scopes your styles to the component. So global styles are very rare and usually a bunch of branding variables these days. Like a lot of bad solutions in tech, tailwind seems to exist as a workaround to the core issue of ‘still using react’.

Similar to Vue then, looks like. For me, CSS modules or CSS-in-TS solves our scoping problems in React.

Re: Konsta UI – Mobile UI Components Built with TailwindCSS

#210

Post by frosted-flakes » Fri, Feb 24, 2023, 6:15 PM UTC

satvikpendem wrote: post #206

frosted-flakes wrote: post #199

Earlier quoted context omitted.

When I come back to a bit of code I haven't looked at for a long time, I find the class names I set on the individual elements extremely helpful, like comments that never go out of date. I can immediately orient myself and know which classes to look at (I use scoped/namespaced classes; not like BEM which is too dependent on HTML structure, just a namespace with the element class, like .Banner-icon). I've never fully…

That's a good way to do it personally, and I might start taking that approach too. The Tailwind syntax for some of the more complex stuff is appalling.

One of my most-used utility class is "reset". Default styles are great, but they often get in the way, so I'll throw this on an element whenever I want to start from a blank slate, alongside other utility classes or a custom class. This can significantly cut down on the length of my CSS files, as well as make them much less brittle and less dependent on the HTML structure, because I don't need to repeatedly undo default styles in every rule I write. My scoped CSS files are typically under 100 lines, even for somewhat complicated things.

  .reset {
     display: inline;
     appearance: none;
     font: inherit;
     border: none;
     border-radius: 0;
     margin: 0;
     padding: 0;
     color: inherit;
     background: none;
     list-style: none;
     text-align: inherit;
     user-select: inherit;
  }

This is defined first in my CSS index file, so that any other classes will override it.

(Note that there's probably a better way of writing this rule. This is just something that evolved organically.)