# 标题为“box”的标签显示为一个大方框

**URL:** https://meta.discourse.org/t/tags-with-title-box-displaying-as-a-big-box/95779
**Category:** Bug
**Created:** [2018年八月27日 20:35 UTC](https://meta.discourse.org/t/tags-with-title-box-displaying-as-a-big-box/95779 "2018-08-27T20:35:20Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![jerdog](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jerdog/32/122843_2.png) [@jerdog](https://meta.discourse.org/u/jerdog)
#### Post date: [2018年八月27日 20:35 UTC](https://meta.discourse.org/t/tags-with-title-box-displaying-as-a-big-box/95779/1 "2018-08-27T20:35:20Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/1/e12bba35c65057d76489a1c9e68a62d20e91bf3f.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/d/ed0b551602cc3b61cddb0b3d03adccad721dc938.png)

### [v2.1.0.beta5 +84](https://github.com/discourse/discourse/compare/b12cf08c5764d07f46d1509df11cabd3c639e931...tests-passed)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2018年八月27日 20:46 UTC](https://meta.discourse.org/t/tags-with-title-box-displaying-as-a-big-box/95779/2 "2018-08-27T20:46:48Z")

</div>

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2018年八月29日 15:56 UTC](https://meta.discourse.org/t/tags-with-title-box-displaying-as-a-big-box/95779/4 "2018-08-29T15:56:00Z")

</div>

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

[https://github.com/discourse/discourse/commit/8ff83d174ee518a2f04721d3b3088924e242e648](https://github.com/discourse/discourse/commit/8ff83d174ee518a2f04721d3b3088924e242e648)

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

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

```

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2018年九月1日 22:00 UTC](https://meta.discourse.org/t/tags-with-title-box-displaying-as-a-big-box/95779/7 "2018-09-01T22:00:02Z")

</div>

This topic was automatically closed after 3 days. New replies are no longer allowed.