#LLM coding agents (particularly #ClaudeCode and #Cursor) are powerful. But they can leave a mess in their wake if you let them do too much all at once.
I'm spending the morning cleaning up generated code that looks like this:
<div class="compose-drawer">
<i class="compose-drawer__pull"/>
<button class="compose-drawer__btn compose-drawer__secondary"/>
<some_other_set_of_elements/>
</div>
<style lang="scss">
compose-drawer {
background: black;
&__pull {
background: white;
}
&__btn {
some-style: something;
}
&__secondary {
some-style: something-else;
}
}
</style>
I don't use that __ syntax - maybe that's something that real front-end coders do, but it looks terrible to me. In tens of thousands of lines of code, I don't do that anywhere, but the LLM decided it should write a lot of it like that. What I generally write is more like this:
<div class="compose-drawer">
<i class="pull"/>
<button class="secondary"/>
<some_other_set_of_elements/>
</div>
<style lang="scss">
compose-drawer {
background: black;
.pull {
background: white;
}
button {
some-style: something;
&.secondary {
some-style: something-else;
}
}
}
</style>
It may not look like that matters much, but with deeply nested HTML, those long a__b__c__d class names just piss me off.
It's probably the sort of stylistic choice I could enforce in an instructions file and I should look into that. But in general, the LLM doesn't seem to do a great job with CSS stylistic conformity. The code it generates works, but I hate looking at it and certainly wouldn't want to impose it on anyone else without adjustment.