7 ms·

When I come back to a bit of code I haven't looked at for a long time, I find the class names I set on the individual elements extremely helpful, like comments

When I come back to a bit of code I haven't looked at for a long time, I find the class names I set on the individual elements extremely helpful, like comments that never go out of date. I can immediately orient myself and know which classes to look at (I use scoped/namespaced classes; not like BEM which is too dependent on HTML structure, just a namespace with the element class, like .Banner-icon). I've never fully committed to TailwindCSS, but I have tried out my own utility classes on a smaller scale, and I found myself having to parse the entirety of the code to figure out what was going on. My preference now is a mix of utility classes for super basic things that would be tedious to set a class on, and custom classes for everything else. Especially if media queries are involved, because good lord is that ever tedious to do with utility classes. If I find myself setting more than 2-3 utility classes on an element, I usually end up moving that to a CSS class for one reason or another. I don't define the utility classes until I need them, and I really don't use very many.

satvikpendem 4y ago
That's a good way to do it personally, and I might start taking that approach too. The Tailwind syntax for some of the more complex stuff is appalling.
- frosted-flakes 4y ago
  One of my most-used utility class is "reset". Default styles are great, but they often get in the way, so I'll throw this on an element whenever I want to start from a blank slate, alongside other utility classes or a custom class. This can significantly cut down on the length of my CSS files, as well as make them much less brittle and less dependent on the HTML structure, because I don't need to repeatedly undo default styles in every rule I write. My scoped CSS files are typically under 100 lines, even for somewhat complicated things. .reset { display: inline; appearance: none; font: inherit; border: none; border-radius: 0; margin: 0; padding: 0; color: inherit; background: none; list-style: none; text-align: inherit; user-select: inherit; } This is defined first in my CSS index file, so that any other classes will override it. (Note that there's probably a better way of writing this rule. This is just something that evolved organically.)
  - kaba0 4y ago
    That’s pretty much what tailwind does without any boilerplate.
    - frosted-flakes 4y ago
      No, Tailwind erases pretty much all browser styles automatically. I use my "reset" class far more selectively, and there's no boilerplate involved.

satvikpendem 4y ago

That's a good way to do it personally, and I might start taking that approach too. The Tailwind syntax for some of the more complex stuff is appalling.

frosted-flakes 4y ago
One of my most-used utility class is "reset". Default styles are great, but they often get in the way, so I'll throw this on an element whenever I want to start from a blank slate, alongside other utility classes or a custom class. This can significantly cut down on the length of my CSS files, as well as make them much less brittle and less dependent on the HTML structure, because I don't need to repeatedly undo default styles in every rule I write. My scoped CSS files are typically under 100 lines, even for somewhat complicated things. .reset { display: inline; appearance: none; font: inherit; border: none; border-radius: 0; margin: 0; padding: 0; color: inherit; background: none; list-style: none; text-align: inherit; user-select: inherit; } This is defined first in my CSS index file, so that any other classes will override it. (Note that there's probably a better way of writing this rule. This is just something that evolved organically.)
- kaba0 4y ago
  That’s pretty much what tailwind does without any boilerplate.
  - frosted-flakes 4y ago
    No, Tailwind erases pretty much all browser styles automatically. I use my "reset" class far more selectively, and there's no boilerplate involved.