Magento2: Best practice to modify css files

You should not edit/modify files within pub/* or vendor/* directory. Pub is for deployment and vendor is for default structure, which you override via your template or custom modules. Instead:

• create a new theme inside app/design/frontend/{vendor}/{yourTheme}/. You can use Blank or Luma theme. You can also create new theme which inherites from Blank (inheritance is defined within theme.xml). If you are already using some theme then skip this step.
• edit .less within your theme so the changes stay visible and don't get replaced when clearing the cache or upgrading the system.
• Use grunt to compile your .less into deployment files.
• You can also setup sourcemaps to pin point your styling within the theme .less files so you can be more productive.

Some useful references:

• Getting started with Less
• Less debugging in Magento 2
• Create a theme in Magento 2
• Getting started with Grunt
• Magento UI Library

This is the flowchart that how magento2 process css files.

Source: Inchoo

This approach has worked for me

Make the necessary changes in the .less file and then run the following commands:

php bin/magento setup:upgrade

php bin/magento cache:flush