Best way to use custom.css?

Hello. Can you please give me some advise how to use custom.css file?

Instruction says:

Create a custom.css file in the file path that looks similar as below.
/templates/protostar/html/com_easysocial/css/custom.css

At the moment I add custom styles to Joomla's template file: /templates/protostar/css/custom.css

What the difference?
My template (not protostar) doesn't has any compression or combine option.

Is there a benefit for me to move ES's custom styles from /templates/protostar/css/custom.css to new file /templates/protostar/html/com_easysocial/css/custom.css ? As result I'll get two custom.css files instead one?

File html/com_easysocial/css/custom.css will not be compressed by ES?

Thanks.