3 ms·

I agree wholeheartedly about design tokens. I use this in every project, always. But I only need custom properties, nothing else. And I get all the advantages y

I agree wholeheartedly about design tokens. I use this in every project, always. But I only need custom properties, nothing else. And I get all the advantages you're describing. And I'd say that striping the cascade, removing selection and specificity and implementing new ways to do the same things (ie: peer-[:nth-of-type(3)_&]:block) is indeed reinventing our use of CSS.

pcthrowaway 4y ago
If you name your own tokens, then other people coming to the project have to learn to apply the same set of tokens correctly, and may even end up reinventing the same ones with new names. In fact, you might even do that (well, it sounds like you might not, but I certainly would, and have) Tailwind is just that, but unified across all projects, with better tooling (VS code integration, tree shaking, lighter css files)
- hoofhearted 4y ago
  PC, is that you? I’ve been working towards emailing you to ask if I could upgrade patrickcollison.com
  - deleted 4y ago
    [deleted]
- emmacharp 4y ago
  You can use the same standardized nomenclature in CSS if you want it to be "compatible" with Tailwind. Nothing wrong here.
hoofhearted 4y ago
So this is where Tailwind comes into play. With TW, you don’t need to any custom properties. They include base stylings and preflight styles that fix and reset just about any browser quirk or bug. The end result is a consistent styles that look and function exactly the same on any device or browser. There are hundreds of little tiny css style rules and fixes for a perfect website, and you have to remember them all. Tailwind has done all of that, plus a bunch of more. Their utility classes are their biggest feature in my opinion. Just the ability to set dark mode styles inline with my light mode styles seal the deal for me alone.
- emmacharp 4y ago
  Again, I agree the base stylings etc. I do the same in each of my project using pure CSS specifically because I don't want to remember them all. So I have all the same kind of files, and change the design tokens accordingly. The only difference is I configure in CSS whereas you configure in JS. You can bundle it all and keep reusing the same files as you would do in Tailwind.
  - hoofhearted 4y ago
    Yeah, it’s pretty much the same difference. For someone starting a brand new app from scratch, they might want to lean on existing css design token libraries. Design tokens aren’t anything new; Bootstrap has been using them for margin for years. mr-1 mt-2

pcthrowaway 4y ago

If you name your own tokens, then other people coming to the project have to learn to apply the same set of tokens correctly, and may even end up reinventing the same ones with new names. In fact, you might even do that (well, it sounds like you might not, but I certainly would, and have) Tailwind is just that, but unified across all projects, with better tooling (VS code integration, tree shaking, lighter css files)

hoofhearted 4y ago
PC, is that you? I’ve been working towards emailing you to ask if I could upgrade patrickcollison.com
- deleted 4y ago
  [deleted]
emmacharp 4y ago
You can use the same standardized nomenclature in CSS if you want it to be "compatible" with Tailwind. Nothing wrong here.

hoofhearted 4y ago

So this is where Tailwind comes into play. With TW, you don’t need to any custom properties. They include base stylings and preflight styles that fix and reset just about any browser quirk or bug. The end result is a consistent styles that look and function exactly the same on any device or browser. There are hundreds of little tiny css style rules and fixes for a perfect website, and you have to remember them all. Tailwind has done all of that, plus a bunch of more. Their utility classes are their biggest feature in my opinion. Just the ability to set dark mode styles inline with my light mode styles seal the deal for me alone.

emmacharp 4y ago
Again, I agree the base stylings etc. I do the same in each of my project using pure CSS specifically because I don't want to remember them all. So I have all the same kind of files, and change the design tokens accordingly. The only difference is I configure in CSS whereas you configure in JS. You can bundle it all and keep reusing the same files as you would do in Tailwind.
- hoofhearted 4y ago
  Yeah, it’s pretty much the same difference. For someone starting a brand new app from scratch, they might want to lean on existing css design token libraries. Design tokens aren’t anything new; Bootstrap has been using them for margin for years. mr-1 mt-2