|
|
|
|
|
|
by drusepth
1197 days ago
|
|
|
They're using TailwindCSS for this, which is full of one-liner utility classes that effectively "replace" CSS classes by moving the equivalent CSS into your HTML. However, what they're not using is Tailwind's `@apply` directive [1] which basically encapsulates these repeated declarations with a repeatable, named CSS class. Doing so would replace their h3 tags with something like <h3 class="header">1. Pruning</h3>
and CSS of h3.header {
@apply text-xl font-bold mb-2;
}
It's not the biggest change and it's debatable how much cleaner the code ends up being. In my experience with TailwindCSS, I don't see a lot of companies using @apply until late in the code lifecycle, if at all. It's often way faster to just use the utility classes directly, and then you find yourself with a site that's already built and looks great -- and very little reason to allocate dev time to go back and abstract away repeated CSS.Tailwind also has this to say WRT using it: > Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse. If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you. [1] https://tailwindcss.com/docs/reusing-styles#extracting-class... |
|
|