News for hackers. Stuff that matters.
Re:Styling with Classy CSS (2006) by colejohnson66 on Thursday November 02, 2023 @12:05PM (#38115551)
Use PostCSS:

    .myFancyTable td {
        @apply p-4;
    }
The advantage of Tailwind, IMO, is that styles for one-off components (like a breadcrumb bar) can just be written inline instead of in a separate file. But reused components like table cells should be using CSS selectors.
Re:Styling with Classy CSS (2006) by cantSpellSober on Thursday November 02, 2023 @12:26PM (#38115959)
This was already an option with Sass's @extend (later ported to a PostCSS plugin)
Re:Styling with Classy CSS (2006) by hipadev23 on Thursday November 02, 2023 @12:10PM (#38115650)
Cool. So @apply is basically a way to compose classes from other classes?
Re:Styling with Classy CSS (2006) by colejohnson66 on Thursday November 02, 2023 @12:26PM (#38115961)
Yep
Re:Styling with Classy CSS (2006) by SahAssar on Thursday November 02, 2023 @12:50PM (#38116397)
And then you are just writing css with a more obtuse syntax.
Re:Styling with Classy CSS (2006) by satvikpendem on Thursday November 02, 2023 @01:06PM (#38116677)
Congratulations, you have reinvented the purpose of CSS classes. This is why I don't use Tailwind, at a big enough scale, it becomes lots of duplication, and if you use @apply, it's just...CSS classes as originally designed.
Re:Styling with Classy CSS (2006) by hipadev23 on Thursday November 02, 2023 @01:08PM (#38116710)
I still think it would be nice if CSS natively allowed you to combine classes the way these @extend and @apply operators do
Re:Styling with Classy CSS (2006) by jermaustin1 on Thursday November 02, 2023 @03:39PM (#38118893)
In practice, I never have found much benefit to that. If I need a base class, I will create a base class. .validation-message for instance, then if the validation is a success/error/warning/info, I will write those classes, then my validation message element will have 2 classes on it "validation-message warning"

That way there is no repeated rules like in the final compiled @extend/@apply operations.

Re:Styling with Classy CSS (2006) by astraloverflow on Thursday November 02, 2023 @02:32PM (#38117992)
Part of the problem with the tailwind debate is that the appeal of tailwind is not just having your styles in your html, it's also having predefined style units, e.g. size intervals for things like margins.

CSS variable libraries like open-props also do this, only without the controversial use of utility classes. Add editor snippets to that and you have nearly the same ease of use as tailwind.

Re:Styling with Classy CSS (2006) by cxr on Thursday November 02, 2023 @03:58PM (#38119176)
You can't reinvent something that was never invented to begin with. "CSS classes"? ("as originally designed"?)

Class definitions are not CSS. They're markup. The CSS selector language does let you target them (with a leading dot, as in .foo)—just like CSS lets you target other things defined in markup with special syntax: element IDs (#bar), attributes ([foo=bar]), etc. It's not as if HTML existed without classes and without CSS, and then CSS was invented and with it came classes, too.

(This isn't to say that you're alone. A frighteningly high number of people reveal through their choice of language an apparent belief that `class` was invented by the CSS working group (or something). That when you're writing HTML, evidently 95% of it is HTML proper, but then when you get to the part where you type out 'c', 'l', 'a', 's', 's', that you're shifting into CSS and it's like, "This last piece with these "classes" was contributed by the CSS folks, and so that's why/how CSS leaked in," without ever seeming to realize that... they're not actually writing CSS. It's still just markup—using the ordinary syntax for specifying attributes and their values. The CSS only happens when you, uh, start writing CSS...)

Re:Styling with Classy CSS (2006) by dqv on Thursday November 02, 2023 @02:41PM (#38118115)
[delayed]