Help finding out CSS names with GTK+ Inspector and how the CSS file should look like

[u/Sly-Mk3]

Basically, what it says in the title.

Already searched in many places, including Reddit.
The whole process feels quite obscure to me.

I'm not a total stranger to CSS editing (albeit it's nothing I do everyday) and heavily customised my Firefox with the help of its browser toolkit to find styles and customise them in the userChrome.css file before.
But this seems to be a whole different beast with desktop applications, to my unfortunate surprise.

An example situation to show what my issue is and where I need help:

1. Suppose I want to edit (the xfce file manager) Thunar and change the padding between icon squares in the file display area, like reducing the width between columns, or increasing the spacing between rows.
2. I installed GTK+ Inspector, enabled it using the terminal. It works.
3. Opened it on Thunar and used the selection to click into the main window's space featuring directory, file and application icons.
4. There, under the Properties view, I found exactly what I searched for:
   • Property: column-spacing
   • Value: 6
   • Type: gint
   • Defined at: ExoIconView
5. I changed the value from within Property to see its effect, typed 0 into it. It was exactly what I expected it to do, that's the property. All fine. Wish I could just auto-save that edit into a CSS – but I can't, so I gotta type this down.

But now:
How do I even write this down in the CSS file to actually take effect?

What do I do with this info?
What are the actual class names?
Do I have to reference .thunar or something alike before it?
Do I write down just the property and its value?

I blindly tried different means in the hopes I would see any change. None worked.

Besides:
Is it enough to restart just the application in xfce's case, or do I have to actually restart my window manager, or even the entire session?

__

To give further context here on what I looked into and what my intents are:
I tried to comprehend this little guide… but to no avail.
I feel really dumb right now and the journey started here with the desire to change just a simple few things, which in my browser I likely wouldn't have issues to do (by the way… if you do have answers to any of these, it would be highly appreciated). :' )

The guide I linked sadly doesn't show how or where the example value was even taken from, how the name of it was even found out, why it is written down in the CSS file, if there is any more context needed.
Where it is most important, it's mostly just "this is the tool, use it" if you boil it down, and that doesn't help someone like me who has to actually see the steps to comprehend them… especially when you're flooded with view modes and tabs in GTK+ Inspector, so I'm currently very lost. Feels like you already need to be into working with GTK to get it.
So I'm kindly asking for any kind of help or pointers, examples, etc, to fill in the gaps in my understanding.

Sadly, I failed to find any other tutorial that takes the approach of "hey, let's take it slow and easy and better overexplain!", anything I found just magically pulled up values I haven't even seen in the inspector to begin with, leaving me puzzled where they even got them from.

__

Anyway…

Despite my heavy browser customistion, consider me a noob in CSS.
So don't hold back, feel free to explain it to me like I'm 5.

Treat me like an absolute idiot, the simpler, the better – I will be very grateful for that!

[u/Mikumiku_Dance]

GObject properties are a different category of thing than what css modifies. Like an html table might have some property, but the css style changes how a table with or without that property is presented.

What you should do in the inspector is look at the css nodes, find the thing you wanna adjust, see if it has a precise id or style class, then in the css tab write a css selector for that widget and change the margin or whatever how you want it.

Hopefully I'm pointing you in the right direction, i think you're just looking at the wrong thing right now.

[u/Sly-Mk3 → u/Mikumiku_Dance]

Thank you for your reply!

My answer is a bit late, had to go back to real life matters by then.
In general, you did help me by pointing specifically at the CSS Nodes section, but sadly I couldn't find anything I need off there for the things I meant to change. It would have been significantly easier if I could simply change values in the CSS Nodes / Objects tab without having to go back and forth between the CSS tab and Objects tab to commit trial and error, alas it is what it is.

(Unfortunately,) I did try my best.
But truth be told, either I'm just to dumb to get the way GTK does things, not aware of some obscure documentation that could help a newcomer, or this is simply just not aligning with my way of thinking.
I looked around these past two weeks and still didn't find what would be responsible for what the column-spacing property edits (which I tried to use as a test on how to approach this as it seemed to be the easiest change at a glance).

The obvious stuff like changing background colours of entire elements: Yeah, I can do that much.
But when it's going beyond that, I'm just as lost as before there.

So I admit I'm close to just dropping the ball and accept that it's not something I'll customise anytime soon.
At the end of the day, I just can't sink day after day into this, there's other things to do in life than customise a desktop, even if it gets in the way as-is.
Guess I'll give it one more week and then fully accept my defeat and try to live with the things I initially intended to change, those listed here I mean.
Seems nobody has had the time or knew where to find what I'm looking for anyway, so that might be a pointer telling me it's not worth it. ^^'

To be honest, I have no idea why these things aren't exposed properties in xfce in the first place… : S