Tags with title "box" displaying as a big box

[jerdog (Jeremy M)]

Hard to explain, but I just noticed that the “box” tag displays as a large box compared to the other tags:

v2.1.0.beta5 +84

[awesomerobot (Kris)]

Ah, so this is a class collision… this can actually a problem with any CSS we prefix with tag- for example, it also breaks if you use the tag name “chooser” because of our class .tag-chooser

There are a couple ways to solve this, but unfortunately this will break tag styling for anyone who’s done it:

• Use a data attribute instead of a class for targeting tags with CSS
• Come up with a more verbose class name like .tag-name-box

We could alternatively never use .tag- in core CSS, but that’s a big restriction to assume

[awesomerobot (Kris)]

I just merged in a change that will move tag names to data attributes.

https://github.com/discourse/discourse/commit/8ff83d174ee518a2f04721d3b3088924e242e648

so now to style a tag named box you’d use this

[data-tag-name="box"] {
  // styles here
}

I went with a data attribute because it reduces the possibility of future class collisions to 0.