Play with TailwindCSS in the Browser

Post by xigoi » Sat, Jun 11, 2022, 9:36 AM UTC

blain_the_train wrote: post #101

onion2k wrote: post #40

Earlier quoted context omitted.

It’s like you have to learn every raw CSS selector, and then also learned how it’s represented in Tailwind, and then scatter that all over your markup. That's exactly what it is. But... you have to do that regardless of what you use for CSS layout. If you're not using Tailwind (or something like it) then you're going to end up creating classes using the raw CSS, and then naming them yourself, and then having to remem…

> you're going to end up creating classes using the raw CSS A program can read what looks like inline css and produce class names for youand put those in class files. When developing your see "height 20px" In your app its compiled to "h-20" with a css file "h-20: height 20" This is better because you don't have to learn another way to express the same logic.

Post by the_other » Sat, Jun 11, 2022, 10:31 AM UTC

deergomoo wrote: post #227

ramesh31 wrote: post #148

Earlier quoted context omitted.

Cascading is excellent for websites. Terrible for applications. There's no concept of anything even remotely similar in any other UI technology. Native applications have use the "scoped component" paradigm for decades, and the web is finally catching up.

This is the crux of it really. It makes a whole lot of sense to have cascading styles in documents. I don’t want to have to explicitly set a text colour for each individual paragraph. But the opposite is largely true for UI elements. For one, I’m probably using some external templating or component framework to repeat them, because they mostly likely have behaviour attached and HTML by itself has no good story for th…

Post by ramesh31 » Sat, Jun 11, 2022, 2:40 PM UTC

no_wizard wrote: post #198

ramesh31 wrote: post #147

Earlier quoted context omitted.

The killer for SASS nowadays is CI. You're either using the (ancient, slow) Ruby implementation of SASS, or node-sass which requires a native binary build and causes headaches across environments. Furthermore, with Post-CSS, the feature set of SASS has been completely subsumed by the latest CSS standard. There's really no good reason to use it anymore.

You should really be using the dart-sass[0] build (just `sass` on npm). None of the headaches of native binaries or using ruby, its pure JavaScript (its a dart codebase transpiled to JS). It is very fast. [0]: https://sass-lang.com/documentation/#older-versions

Post by pier25 » Sat, Jun 11, 2022, 4:41 PM UTC

unleashit wrote: post #269

jozzy-james wrote: post #268

Earlier quoted context omitted.

explain to me how this compiles .class1 { .class2 { &:hover { font-family: value; } body.some-thing & { color: woooooo; } } }

I don't think the example compares. In languages like JS, double, triple or even further nested ternaries are possible. But terser isn't always better because human readability is important. I can easily understood your SASS example because I know SASS, but I'd never write it like that. If I really wanted to add a decedent selector from a body class to .class1, I'd start a new nest on the body tag. The problem with T…

Post by aaronbrethorst » Sat, Jun 11, 2022, 9:51 PM UTC

inopinatus wrote: post #260

aaronbrethorst wrote: post #171

Earlier quoted context omitted.

This isn't meant as a contradiction of your point, but there are plenty of ways to use component-based architectures with server-side rendered apps, too, like GitHub's ViewComponent gem for Rails. https://viewcomponent.org Also, I'd go so far as to say that if you're not using a component based architecture for your web app's view layer, you're creating a ton of extra work for yourself.

I’d add you don’t even need ViewComponent. Layouts, partials, variants, and helper functions provide plenty of heavy lifting options when it comes to refactoring your HTML. My take on ViewComponent: it’s what helper functions become when they grow up into proper objects. Great for larger projects, may be more infrastructure than necessary for smaller ones, adopt incrementally when they seem compelling.