# Reopen component class to give a default CSS class name based on component name

**URL:** <https://discuss.emberjs.com/t/reopen-component-class-to-give-a-default-css-class-name-based-on-component-name/13231>\
**Category:** Uncategorized\
**Created:** [July 5, 2017, 2:10am UTC](https://discuss.emberjs.com/t/reopen-component-class-to-give-a-default-css-class-name-based-on-component-name/13231 "2017-07-05T02:10:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sheriffderek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sheriffderek/32/10619_2.png) [@sheriffderek](https://discuss.emberjs.com/u/sheriffderek)\
**Post date:** [July 5, 2017, 2:10am UTC](https://discuss.emberjs.com/t/reopen-component-class-to-give-a-default-css-class-name-based-on-component-name/13231/1 "2017-07-05T02:10:29Z")

</div>

When I create a component such as `{{my-useful-abstraction}}` I would love to just have a default element class name of `.my-useful-abstraction` given to that component.

On a similar note, I reopened the _LinkComponent_ class to add a `.link` class to all of them by default. How might I get the current component name and use that to give each component a class of its dasherized name?

```auto
Ember.LinkComponent.reopen({
  classNames: ['link'],
});

```

_Side question_: Where would you expect additions of this nature to live in the project structure?

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [July 5, 2017, 1:35pm UTC](https://discuss.emberjs.com/t/reopen-component-class-to-give-a-default-css-class-name-based-on-component-name/13231/2 "2017-07-05T13:35:48Z")

</div>

Not sure if this is exactly what you want but you could take a look at ember-component-css either for inspiration or to actually use in your project. It adds an auto-generated css class to every component, and also injects that name into each component so it can be used in component/template code.

---

<div class="post-metadata">

**Author:** ![sheriffderek](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/sheriffderek/32/10619_2.png) [@sheriffderek](https://discuss.emberjs.com/u/sheriffderek)\
**Post date:** [July 5, 2017, 2:17pm UTC](https://discuss.emberjs.com/t/reopen-component-class-to-give-a-default-css-class-name-based-on-component-name/13231/3 "2017-07-05T14:17:46Z")

</div>

Good point. I haven’t used that addon for a while. I’ll check out the source. Thanks.