Hi! I’m Troy McClure. You might remember me from such stirring blog posts as: Computers are Great! But Do They Work?” and “The Coffee Shop of Horrors: The Case of the Broken WiFi”.

It’s easy to get opinionated about certain things. The past few weeks for me was certainly no exception.

I really like the idea behind components in templates, and the way they can be reused in other parts of a website. But sometimes over-reliance on it, particularly if naming conventions are not followed (i.e. base_field.html being a component of a component of a component isn’t terribly intuitive - see below), then there will be blood problems.

<!-- basic_field.html -->
<div class="{ { name } }-form-{ { field|field_type } } { { name } }-field">
  <label class="{ { field.name } }-form-label" for="{ { field.id_for_label } }">{ { field } }{ { field.label } } { { field.help_text } }</label>
  <p class="{ { field.name } }-form-errors">{ { field.errors } }</p>

That isn’t readable. And it’s used everywhere on the website. If it weren’t for all the snippets of jQuery/3rd party libs littered throughout all the templates, this wouldn’t be so much of a problem to fix. But snagging out a single class name breaks crucial features.

There’s gotta be a better way. Definitely made me appreciate React and Ember a whole lot more.