heydon,
@heydon@front-end.social avatar

📝 What Is Utility-First CSS?

https://heydonworks.com/article/what-is-utility-first-css/

(this was going to be a video, but it got pretty long, plus I think there's a small chance this could appear high in organic search if shared enough)

rijk,
@rijk@fosstodon.org avatar

@heydon I wonder what would happen if there was a tailwind-style marketing website but for plain CSS.

"Ever written Tailwind you weren't quite happy with? Here's a radical idea: CSS!"

"Rapidly build modern websites without any required tooling!”

"Works on every browser!”

"16.7 milllion colors included!”

"Future proof!"

tomw,
@tomw@mastodon.social avatar

@rijk @heydon The audience for Tailwind might be willing to come along if someone really nailed a "classless CSS" library (just use the right elements and it makes it look nice!) Have seen a few attempts but never a really good one.

rijk,
@rijk@fosstodon.org avatar

@tomw @heydon What a beautiful irony..

tomw,
@tomw@mastodon.social avatar

@rijk @heydon I know it seems like the opposite, but at the same time it isn't. Their allergy, sadly, is to the "cascading" part.

heydon,
@heydon@front-end.social avatar

Multiple people have said I'm mischaracterising Tailwind and the @apply rule, so I've added this for clarification. You're still not going to like it, though.

stvfrnzl,
@stvfrnzl@mastodon.online avatar

@heydon "CSS with extra steps and a brand name" is the best one-liner to describe it. This will drive Tailwind fanbros CRAZY

gilesdring,
@gilesdring@mastodon.me.uk avatar

@stvfrnzl @heydon Would anyone like to invest in a complicated customisable CSS reset and pattern library I’m thinking of developing. Working title: Hindgust

tomw,
@tomw@mastodon.social avatar

@heydon I think too many people (who skew more coder than designer) have developed an allergy to CSS because "oh no, I added one line to .btn and it broke the other buttons" and similar my-first-usecases.

The answer, and maybe CSS people don't want to hear it, is to tell people that inline styles are OK. Really it's OK. Don't worry. It's better than Tailwind anyway.

Meyerweb,
@Meyerweb@mastodon.social avatar

@heydon I was scrolling through that long code block in your (quoted from Tero’s) post when it finally hit me: Tailwind reminds me of nothing so much as a mostly-successful attempt to recreate MS Word’s “Export to HTML” source code patterns.

heydon,
@heydon@front-end.social avatar

@Meyerweb Haha, that's about right. MS FrontPage comes to mind too.

leigh,
@leigh@ottawa.place avatar

@heydon @Meyerweb having Dreamweaver flashbacks from 2003 over here

heydon,
@heydon@front-end.social avatar

@leigh @Meyerweb I was learning (Macromedia!) DreamWeaver at university back then 😅

leigh,
@leigh@ottawa.place avatar

@heydon @Meyerweb I was about to drop out of uni and spend a year ish making extremely basic HTML websites haha

jmcs,
@jmcs@jsantos.eu avatar

@heydon so people reinvented the style attribute but worse?

Jbasoo,
@Jbasoo@mastodon.social avatar

@jmcs @heydon It does allow responsive inline styles which can be handy but that's pretty much the only improvement IMHO. The new CSS scoping mechanism could be a good native solution too.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • rosin
  • mdbf
  • khanakhh
  • DreamBathrooms
  • tacticalgear
  • magazineikmin
  • thenastyranch
  • Youngstown
  • Durango
  • InstantRegret
  • slotface
  • ethstaker
  • kavyap
  • ngwrru68w68
  • megavids
  • everett
  • cisconetworking
  • GTA5RPClips
  • tester
  • osvaldo12
  • modclub
  • cubers
  • Leos
  • provamag3
  • anitta
  • normalnudes
  • JUstTest
  • lostlight
  • All magazines