How to name an element?

[jenstornell]

One awesome thing with Tailwind is that we don't need to think of names for everything because we are using utility classes.

One downside of that is that it can sometimes be hard to quickly see which element is THAT button we are looking for among five others. That's because we don't have any names on them.

Which is the best approach to bring back names in cases when we need them?

My own thoughts

PHP comment

In case we use PHP (like I do), we can add a comment in PHP like:

<?php /* My red button */ ?>
<button class="bg-red-500"></button>

It's a bit ugly but it would work and it would leave nothing in the HTML output which I think is a good thing.

HTML comment

Similar to the PHP comment but it's less ugly in my opinion. The downside is that it will get rendered on the output source.

<!-- My red button -->
<button class="bg-red-500"></button>

HTML ID

A html ID would not take too much space. The downside is that it's not ment to show the name in the HTML, but instead provide a function for that element.

<button id="red-button" class="bg-red-500"></button>

HTML data attributes or HTML classes

Same as with ids.

<button data-name="red-button" class="bg-red-500"></button>

Your thoughts?

Which approach would you use and why?

[benface]

Personally, I use a class with a prefix of c- (for "component") that is first in the list of classes. Some components have styles associated to them, some don't and just have a name to identify them easily and select them in JS. I prefer a class over an ID for two reasons:

• IDs should be unique across the page and you never know when you might want to reuse a component.
• If I had styles associated to the component, I would still want to be able to override these styles with utility classes which have less specific class selectors

I also generally follow a BEM-like naming convention for subcomponents (and modifiers when there are styles associated to these classes). Here's an example:

<button type="button" class="c-button c-button--dark text-lg">
  <span class="c-button-icon"><svg>...</svg></span>
  <span class="c-button-text">Click me</span>
</button>

Your data-name idea is also interesting and I've done it that way before, but it's slightly harder to select them (in CSS and in JS) and you can't use modifiers (e.g. c-button--dark) which I do quite often.

[jalendport]

Oooo I really like the idea of using the c- prefix to differentiate between utility classes and components 🤔

[rexwebmedia]

I use letter t as prefix because vuetify already reserved letter v.

[jenstornell]

While there are different approaches to this, I think html comments are the easiest way so solve this.

See the screenshot below. It's especially useful to name very similar elements like I have here. There is no way I can see what image in the svg code represent.

In this particular example I'm using Electron + Tailwind + AlpineJS which works great.

[thexpand]

How do you add HTML comments in React?

[estevanmaito]

Not a solution to your problem, but my approach:

If I feel that I'm starting to loose components, I will add something to the project to make components easier, usually React.

You can come with the best naming strategy in HTML, but sooner or later you'll be lost scrolling "where is that component", or reading every comment, while with the most simple component strategy you would just need to look for a file.

If I were limited to just HTML, I'd create an HTML page for the components and render them like a list, so I could just open this in the browser and view them, like a shelf.

[jenstornell]

I've built a few projects with Vue (similar to React) but after a while I got tired of the build process. It just felt like a big unreliable overhead.

The build process rely not only on Vue to work, but on Node and other things. It's a dependency that I don't like.

Instead I've now tried https://github.com/alpinejs/alpine which require no build process. Tailwind has a build process but it's only done a few times, then most things are done in the html.

I like your idea of having the files tell what it is. My current problem is that I have everything in a single html file. I'm still thinking how I can get out of that.