Coming from BEM, so this may just be a me problem. I have a card element whose className is 38 classes long including four responsive variants and two hover states, and it takes up three lines in the editor.
It works. It is the correct markup. I feel like I have done something wrong. Is this what everyone's code looks like or am I missing the step where you tidy it up?
The actual smell is a long className plus three conditionals inside it. Length on its own is nothing. Length with logic in it is where you can no longer tell what the element looks like without running the app.
The documented guidance is to extract with @apply once you pass about ten classes, so you are well over.
There is no such number in the docs and never has been. The maintainers have been fairly consistent that @apply is a compatibility escape hatch for cases where you cannot put classes in markup, not a tidying step in the normal workflow. If someone shows you a threshold, ask where it came from.
@apply exists and it is mostly a trap. You lose the ability to see the styles at the call site, and you gain the obligation to invent a name for something that did not need one. Use it for genuine global primitives - a focus ring you want identical everywhere - and not for "this card".
The one place I still reach for it is markup I do not control, like the output of a markdown renderer, where I cannot put a class on the element and have to style by tag. That is a real use and it is narrow.
It felt illegal to me for about three weeks and then I stopped noticing entirely. The thing that made it click was deleting a component and knowing with certainty that no CSS anywhere had just become dead.
@rest_day_rita · 6mo ago · 2 replies
Normal, and fine, right up until the moment you copy it.
The rule is not length, it is repetition. A 38-class element that exists once is a page, and pages are allowed to be specific. The same 12 classes in 14 files is a component you have not written yet. Extract on the second or third copy, not on first sight of a long line.
The BEM instinct is telling you that a long string is unmaintainable because in BEM a long string meant your naming had failed. Here it does not mean that - the styles are still local, still deletable, and still readable at the place they apply. What you have lost is a name, and you only need a name when something else has to refer to it.
Reply
Report
@lowell_frame · 6mo ago
prettier-plugin-tailwindcss also sorts them into a consistent order, which makes a three-line className scannable enough that you stop noticing the length. Either a genuine fix or an enabler, depending on your mood that week.
Reply
Report