Same CSS file generates under different folder when I flush A question from a newbie:

I am using a theme in my site and I made some changes in the CSS file.
The CSS file I am modifyiing is Style.XcVzbo5GbrB4v7QVES377fts6uudS0o0YbaMpBamvPg1.css 

and it is in the folder: /sites/default/files/less/1TKupTVXZyLFbxdskTDq5OyCMsRMsIZmPQc_nx40j0Y/sites/all/themes/XXXXXX/less

So when I flush the caches, a new folder named randomly like above appears in  

/sites/default/files/less/


with the unmodified version of my CSS file Style.XcVzbo5GbrB4v7QVES377fts6uudS0o0YbaMpBamvPg1.css in it.

Where is the source of this Style.XcVzbo5GbrB4v7QVES377fts6uudS0o0YbaMpBamvPg1.css so I can modify it for ever?
It's in a theme, module, library, Drupal's misc folder, or basically anywhere that the web server can read; that's as much as can really be said without more info.

To get that info, turn off css aggregation in Configuration -> Development -> Performance, then try inspecting the page again. Now you should see the original, unaggregated source file of the rule.

Bear in mind that if you're compiling Sass/Less to CSS, the file you find might not necessarily be the last place you need to look - it depends how the compilation actually happens in your application. But it gives you a good starting point at least.

Also bear in mind the nature of Cascading Style Sheets - if you introduce an identical rule with new styles after the original, it will take precedence. So as an alternative to tracking down the original, you could just add a new css file to your theme and give it an appropriate weight so it loads last and your styles "win".

Don't forget to switch aggregation on again afterwards if you need it.