The whole point of CSS is to have to declare properties like this once, and only once, for a group of functionally similar elements.
Also note that switchTab has to be told the position of the tab it's switching to (it should be able to infer that the element's id, or its position in the list). Also note that the function has a hard-coded tab count baked in - a stealth bug waiting to be tripped on.
And why do we need to explicitly toggle the border-b-2 and border-yellow-400 properties? Shouldn't these be tucked away under some kind of class declaration (the same way the hidden property works)?
This may sound like nitpicking, but it's not - code like this becomes really hard to maintain at scale.
And just imagine someone asking this thing to generate an algorithm to say, determine whether someone's medical procedure should be covered under insurance or not.
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.
That is, it works - but what is with the repeated class declaration for every h3 element?
The whole point of CSS is to have to declare properties like this once, and only once, for a group of functionally similar elements.Also note that switchTab has to be told the position of the tab it's switching to (it should be able to infer that the element's id, or its position in the list). Also note that the function has a hard-coded tab count baked in - a stealth bug waiting to be tripped on.
And why do we need to explicitly toggle the border-b-2 and border-yellow-400 properties? Shouldn't these be tucked away under some kind of class declaration (the same way the hidden property works)?
This may sound like nitpicking, but it's not - code like this becomes really hard to maintain at scale.
And just imagine someone asking this thing to generate an algorithm to say, determine whether someone's medical procedure should be covered under insurance or not.