# \[FEEDBACK\] Advanced Stylesheet Setup Videos on IU

**URL:** <https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 20, 2024, 11:46pm UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904 "2024-11-20T23:46:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 20, 2024, 11:46pm UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/1 "2024-11-20T23:46:49Z")

</div>

> **[Advanced Stylesheet Setup Video at Inductive University](https://inductiveuniversity.com/video/advanced-stylesheet-setup)**
>
> The creative possibilities for styling your Ignition project are virtually endless with prior knowledge of CSS and the power of Advanced Stylesheets. In this lesson, we'll learn how to add project-scoped CSS stylesheets into the Perspective project...

I've only just started watching these vidoes, but they look to be really informative for people looking to take the dive into more advanced styling of their components.

I have a suggestion in the first video though. When creating custom class selector rules, the video mentions that the class won't be selectable from the `style.classes` dropdown menu, so you have to type it in manually without the `psc-`. This is the reason I always add (and recommend adding) a blank style class into the Perspective Styles for each and every custom class selector rule that you add into the stylesheet or CSS theming files. Otherwise, onboarding newbies onto a project just takes more time and it takes transparency and ease of use away from the developer.

This would be good to mention in the videos imo.

It would also be good to identify that you can open the dev tools directly in the Designer as well from the Tools menu.

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [November 21, 2024, 2:29am UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/2 "2024-11-21T02:29:47Z")

</div>

I actually agree with that, I have the same approach to the blank classes.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 21, 2024, 2:46am UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/3 "2024-11-21T02:46:37Z")

</div>

This is soooo smart! I just always bounce over to the stylesheet to copy the name.

Definitely going to to use this!

---

<div class="post-metadata">

**Author:** ![Samuel\_Sueur](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@Samuel\_Sueur](https://forum.inductiveautomation.com/u/Samuel_Sueur)\
**Post date:** [November 21, 2024, 7:40am UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/4 "2024-11-21T07:40:34Z")

</div>

> [@nminchin](#):
>
> It would also be good to identify that you can open the dev tools directly in the Designer as well from the Tools menu.

Whaaaat.

I learnt something today.

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 22, 2024, 9:27pm UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/5 "2024-11-22T21:27:53Z")

</div>

Just to add to this since I have been playing with it:

If you like organization in your styles you will have to escape the `/` in your names. so as an example

```css
.psc-SomeFolder1\/SomeFolder2\/skeleton {
	background-color: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
}

```

This is kind of ugly to look at but felt like maybe useful to others coming to this in the future.

Also if there is a better way please chime in!

---

<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:** [November 22, 2024, 9:44pm UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/6 "2024-11-22T21:44:41Z")

</div>

> [@Benjamin\_Furlani](#):
>
> Also if there is a better way please chime in!

Nope, this is exactly what we're doing on the backend. CSS doesn't really have folders, so this is how we're 'faking' them.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [November 22, 2024, 9:55pm UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/7 "2024-11-22T21:55:47Z")

</div>

> [@Benjamin\_Furlani](#):
>
> Also if there is a better way please chime in!

If you're generating your CSS outside Ignition, we've made this postcss plugin available:

> **[pyro/packages/postcss-perspective-style-class at main · mussonindustrial/pyro](https://github.com/mussonindustrial/pyro/tree/main/packages/postcss-perspective-style-class)**
>
> Resources, tools, and assets for Ignition by Inductive Automation 🛠️ - mussonindustrial/pyro

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 22, 2024, 11:11pm UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/8 "2024-11-22T23:11:45Z")

</div>

Amazing solutions as always❤️

Will definitely look into this!

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [November 25, 2024, 9:00pm UTC](https://forum.inductiveautomation.com/t/feedback-advanced-stylesheet-setup-videos-on-iu/98904/9 "2024-11-25T21:00:28Z")

</div>

> [@paul-griffith](#):
>
> Nope, this is exactly what we're doing on the backend. CSS doesn't really have folders, so this is how we're 'faking' them.

Would using attribute selectors cause any performance or other types of implications? This seems to work just fine, after some testing, but just checking to see if there is a reason not to just use this 🤷‍♂️

```css
[class*="folder1/folder2/class"] {
	background-color: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
	position: relative;

}

```