How to properly edit Magento 2 stylesheets? And what to do next to see it in the frontend?

Question

I'm new to Magento 2.0. I purchased a theme and I want to edit some styles. I checked in the firebug it's showing

url/pub/static/frontend/vendor_name/theme_name/en_US/css/styles-l.css

I made some research but I can't get clear instructions if it's ok to edit the file inside the static folder. I've read some that if I will edit it, it will be remove if I will do some static-content:deploy, is this true? If yes then what will I do to edit it?

I tried going to app/design/frontend/vendor_name/theme_name/web/css/source but I didn't find any LESS for the styles-l.css. Please can someone give me a guide on where will I edit or copy and move it from and to?

Btw, the theme inherits the Magento_Blank.

Looking forward to anyones expertise.

Answer 1

Don't edit pub folder style files(less or css), first you have to configure compilation of style in admin path given below

Store -> Configuration -> Advanced -> Developer -> Front-end development workflow

change to

Client side less compilation

Then edit your theme styles module wise and other web/css/source (common style)

app/design/frontend/vendor_name/theme_name