As do I but when you have 10 classes that rely on the ‘peer-checked:group-[]:after:’ prefix, plus any variations then I find myself spending 5 times as long to get the result I want and it takes me far longer when I revisit the component in future.

My issues aren’t with the amount of classes, rather when I’m building something like a toggle and I’ve got to do things like ‘peer-checked:group-[]:after:translate-x-full’

Dev.to was the popular one, the medium article, even now it’s been added to a publication is still very very low view figures, but a 75% read rate. Which is interesting.

For me, it’s always Laravel and Vue / Nuxt where I have a choice. But at work I’m React / Next and Nest at work. In my experience, unfortunately, there’s huge disparity between both the number of roles and the salaries of my preferred stack vs React based roles.

I should point out this is to accommodate Tailwind so I need to explicitly spell out classes.

However after playing around, I noticed what v-bind in CSS is actually doing is setting inline styles, which has slightly put my mind at ease and I think this is the way forward. Unless anyone is away of any clever things v-bind in CSS is doing under the hood?

I then looked at adding inline styles to components, which seemed okay but I was slightly worried about performance. This morning on the way to the gym I remembered Vue offers v-bind in CSS. Unfortunately that needs to be attached to a CSS property, so something like this won't work:

I then looked at CSS in JS which looked clean in the DOM but that caused a flash. I didn't want that. Looked a bit deeper and realised Emotion adds a stylesheet next to the component on the server then removes it on the client. I took a look into this but decided it was too complicated.

I actually don’t find vocals off putting, podcasts, news or radio presenters, yes. But I don’t find vocals bother me at all.