Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Styling with Classy CSS (2006)

thedailywtf.com

Post reply on HN
Print view View original

11–20 of 76 posts

Re: Styling with Classy CSS (2006)

#11

Post by wenebego »

hipadev23 wrote: post #7
BasilPH wrote: post #4

Earlier quoted context omitted.

Why do you feel it's nonsense? I'm genuinely curios. Personally I'm using Tailwind for 90% of the styling. If I keep repeating a certain combination of classes often, I'll group it with a custom class. (Edit: See colejohnson66's comment for an example) Two advantages of tailwind that I didn't see before I started using it: - It's often easier to find what I want in the tailwind documentation, and it comes with nice e…

My gripe with Tailwind is the redundancy of class definitions across elements that clearly would benefit from "normal" CSS. If I have a with a whole host of elements, those repeated class definitions become quite tedious.

Isnt this only a problem when the table contents are hardcoded ?

Re: Styling with Classy CSS (2006)

#12

Post by cantSpellSober »

Yep, Tailwind didn't invent style tokens or composable classes! After learning Foundation, Tachyons, Material UI, Chakra...I was happy to see we finally settled on Bootstrap.

Oh, we didn't? Well, time to learn a new syntax. (Was it `dark:md:hover:text-slate-400` or `hover:md:dark:text-slate-400` again?) At least Tailwind arguably has more benefits than its predecessors.

Re: Styling with Classy CSS (2006)

#14

Post by cantSpellSober »

colejohnson66 wrote: post #8
hipadev23 wrote: post #7

Earlier quoted context omitted.

My gripe with Tailwind is the redundancy of class definitions across elements that clearly would benefit from "normal" CSS. If I have a with a whole host of elements, those repeated class definitions become quite tedious.

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.

This was already an option with Sass's @extend (later ported to a PostCSS plugin)

Re: Styling with Classy CSS (2006)

#15

Post by [deleted] »

hipadev23 wrote: post #10
colejohnson66 wrote: post #8

Earlier quoted context omitted.

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.

Cool. So @apply is basically a way to compose classes from other classes?

[deleted]

Re: Styling with Classy CSS (2006)

#16

Post by hipadev23 »

wenebego wrote: post #11
hipadev23 wrote: post #7

Earlier quoted context omitted.

My gripe with Tailwind is the redundancy of class definitions across elements that clearly would benefit from "normal" CSS. If I have a with a whole host of elements, those repeated class definitions become quite tedious.

Isnt this only a problem when the table contents are hardcoded ?

It was just an example, but it's more broadly the redundancy of a list of repeated classes applied to elements that are identical or mostly identical.

These are things that CSS literally solved with the web2.0/semantic-web movement 20 years ago. I get the convenience of Tailwind but a lot of it feels like a massive step backwards.

Re: Styling with Classy CSS (2006)

#18

Post by munk-a »

It's extremely important to create classes like `.f-green` in case the definition of green ever changes. That's what we call forward portability.

Also, if your company rebrands from green to red you can just `.f-green {color:#f00;}` - it's so efficient!

Re: Styling with Classy CSS (2006)

#19

Post by naet »

BasilPH wrote: post #4
i0nutzb wrote: post #2

Back in the day we made fun of this nonsense, now we freakin glorify it with libraries like Tailwind & friends...

Why do you feel it's nonsense? I'm genuinely curios. Personally I'm using Tailwind for 90% of the styling. If I keep repeating a certain combination of classes often, I'll group it with a custom class. (Edit: See colejohnson66's comment for an example) Two advantages of tailwind that I didn't see before I started using it: - It's often easier to find what I want in the tailwind documentation, and it comes with nice e…

Tailwind is one of those polarizing topics where people either love it or hate it. I've used it at a few companies and I didn't care much for it, but I had coworkers who swore by it.

Re: Styling with Classy CSS (2006)

#20

Post by nicbou »

BasilPH wrote: post #4
i0nutzb wrote: post #2

Back in the day we made fun of this nonsense, now we freakin glorify it with libraries like Tailwind & friends...

Why do you feel it's nonsense? I'm genuinely curios. Personally I'm using Tailwind for 90% of the styling. If I keep repeating a certain combination of classes often, I'll group it with a custom class. (Edit: See colejohnson66's comment for an example) Two advantages of tailwind that I didn't see before I started using it: - It's often easier to find what I want in the tailwind documentation, and it comes with nice e…

Perhaps I'm just old-fashioned but I prefer semantic classes.

I completely rewrote the CSS for my website and I did not need to touch the templates. An .error is an error and a . collapsible is a collapsible. Their exact style is not dictated by the markup.

I also like that it keeps the markup small and easy to read, because it's not peppered with CSS.

It also avoids situations where two widgets look different because I forgot to copy one class over. A .collapsible is a collapsible.

Post reply on HN