Collapse/Expand CSS Selectors

In the styles panel be able to collapse/expand each class selector so you can see more selectors in the panel like you can do in Visual Studio :+1:

For example go from this

to this

Although it sounds like a good idea I think it would be counterproductive, because the whole point to having them show up as they do is so you can see exactly what is affecting the selected component. If you collapse them, you will only see that there is a class, but will lose the automatic ability to see what the contents are to know if there is something in there needing adjusting/removing/additions etc.

Having said that, there are probably much more professional people in here that would this helpful. Although I don’t consider myself knowing all there is to know, I know enough to know this wouldn’t be helpful for me at all. The concept is good, just need to know would it help a lot of people or not? Hopefully more feedback will let ya know :slight_smile:

The idea would be to have the class still go to the top of the styles list when you select an html element like now but with maybe a plus - minus icon next to each class in the styles panel. Click on it and it shows or hides the name value pairs. It would also be cool to have a selected html elements class show as a different colour.

Maybe even something like this where you click the orange bit and the class collapes, click again and it expands.

I understand what you mean/meant no worries there. Just putting my opinion out there because in reality, there are usually “not” all that many classes/ID’s connected to a specific part of a component. Sometimes yes, but not usually so I’m wondering what the reason would be other than to save just a little bit of real estate in the styles window. Maybe I’m not seeing the big picture of how this would benefit you or others or even myself?

Not saying this doesn’t have merit, but I don’t fully understand the reason behind WHY you’d want to be able to collapse classes. Assuming this were possible, what would the default state be? I wouldn’t want to have to open every class manually before I could see the rules. It would just add an unnecessary step in the editing process. Also, I don’t see the benefit to hiding classes. Now that we can detach the Styles panel and put it on a second monitor, it’s actually nice to be able to see a full height window all the classes at a glance.

Just wondering your reasoning here? To me, having the search tool all I need to quickly sift through long CSS and find what I want. And I definitely wouldn’t want the classes collapsed that are in the base Style panel (the ones affecting a selected component.) That’s one of the most useful features of BSS - to quickly and easily see the cascade of style affecting a given component.

The WHY is… You’ve setup and edited your class the way you want so collapse it (not hide it) with a toggle icon of some sort. Click the toggle button again and the class expands. Default would be all classes expanded. On a single monitor (my TV) like I have, it makes it easier to see more classes in the CSS panel with less panel resizing, more so if the class has a lot of name value pairs. In Visual Studio it’s fold/unfold.

I’d also still like to see a always on top option for the detached panel. This is all on my Santa list :laughing:

Okay, so that makes more sense. Since you’re stuck on one monitor, screen space is precious. I’m not sure if you’re a developer, freelancer, do this for a living, or just use BSS for your own site, but I can tell you from personal experience that once you go from one monitor to two, you will never understand how you lived with only one monitor for so long before. I actually have three now, and I’d probably have a 4th if my system could support it.

1 Like

I’m a pipefitter but I also have a degree in IT. I make websites as a bit of a hobby. I make them on my 55" telly then do the media queries for responsiveness. I do have a 2nd monitor in my bedroom but the big telly’s in the living room so 2nd monitor would be out of place and get in the way. I’ll pull it through and give it a bash over the hols but it can’t stay in the living room permanent. :slightly_smiling_face: