# \[IGN-3254\]Add CSS element state style definitions without using Perspective Style classes

**URL:** <https://forum.inductiveautomation.com/t/ign-3254-add-css-element-state-style-definitions-without-using-perspective-style-classes/54068>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [December 13, 2021, 7:05pm UTC](https://forum.inductiveautomation.com/t/ign-3254-add-css-element-state-style-definitions-without-using-perspective-style-classes/54068 "2021-12-13T19:05:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [December 13, 2021, 7:05pm UTC](https://forum.inductiveautomation.com/t/ign-3254-add-css-element-state-style-definitions-without-using-perspective-style-classes/54068/1 "2021-12-13T19:05:09Z")

</div>

As most of you know, you can style many things in Perspective based on the element state (based on [CSS pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), I’m guessing). For example, a label can have default style when displayed and another style when it is hovered over. The way to do that in Perspective now is to use Style Classes or to add custom CSS, either in a theme or additional files.

Is there a reason why we can’t add element state style declarations straight on the component props? Is this to discourage bad practices or is there a technical reason that makes it impractical?

The reason I’m asking is because, though style classes are a great idea in traditional web development, the implementation in Perspective is quite clunky, at best. The additional effort of having to remember and find Style classes I previously created to do something simple like underline a label’s text on hover is not worth it for me. I may be an anomaly, but I know most of my coworkers never use them either.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [December 13, 2021, 8:25pm UTC](https://forum.inductiveautomation.com/t/ign-3254-add-css-element-state-style-definitions-without-using-perspective-style-classes/54068/2 "2021-12-13T20:25:09Z")

</div>

> [@YF129701](#):
>
> Is this to discourage bad practices or is there a technical reason that makes it impractical

I believe this is because styles applied in the component props are written directly into the html. Pseudo-classes can only be applied to CSS selectors and so are not valid within/as HTML elements.

Of course you can work around some of this by using events and modifying the style props on the fly. Utilizing style classes and/or themes are much cleaner IMHO.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [December 13, 2021, 8:48pm UTC](https://forum.inductiveautomation.com/t/ign-3254-add-css-element-state-style-definitions-without-using-perspective-style-classes/54068/3 "2021-12-13T20:48:54Z")

</div>

Ahh… This is definitely it. Any styles that are defined in `props.style` are added as inline CSS in the markup. Pseudo-selectors and pseudo-elements are an abstraction of the DOM (based on [this](https://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles)).

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 14, 2021, 4:50pm UTC](https://forum.inductiveautomation.com/t/ign-3254-add-css-element-state-style-definitions-without-using-perspective-style-classes/54068/4 "2021-12-14T16:50:35Z")

</div>

We have a pending ticket to make a more ‘intermediate’ style CSS declaration resource; a project-local raw CSS file. No limitations of style classes; less global than themes; less advanced than themes.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [December 14, 2021, 4:52pm UTC](https://forum.inductiveautomation.com/t/ign-3254-add-css-element-state-style-definitions-without-using-perspective-style-classes/54068/5 "2021-12-14T16:52:30Z")

</div>

That would be **S W E E T**. Seriously, this is something I would use every time I use the designer. Is there a timeline for this ticket?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 14, 2021, 5:25pm UTC](https://forum.inductiveautomation.com/t/ign-3254-add-css-element-state-style-definitions-without-using-perspective-style-classes/54068/6 "2021-12-14T17:25:58Z")

</div>

No, no timeline. Technically it hasn’t even been accepted yet as a feature we’ll do; it’s something I proposed that is sitting in the rather formidable list of possible Perspective bugs & features.
