So, what you’ve stumbled across is something I really don’t like about the Porto setup. They don’t 100% use a conventional structure. Kinda lazy coding IMO.
Head.phtml
Anyway, in the case where you have css/custom.css in the Porto Parent, this relates to a file somewhere in pub/static/css/ (I think). I would say it’s safe to edit this custom.css file. But if you want to be super-safe the override the head.phtml file by putting it in your Porto Child and then change the name of the from custom.css to something.css and create a new file for it in the pub/static/css/ folder. That would be totally upgrade proof.
Alternatively, just don’t use the custom.css file and make your CSS changes it the appropriate documents as per the Magento Documentation.
Porto Settings
Next, there’s the Custom Styles in the Porto Settings. These boxes create another CSS file (settings.css or something like that). This file loads last when a page is generated, therefore overrides any existing CSS. There’s a couple of issues with this too:
- It’s a sticky-plaster solution when you can’t be bothered to make proper changes to CSS files
- It’s harder to find CSS because it’s another place to look
- Because it relies on an extra CSS file loading after everything else, it’s actually having a negative affect on page-load times.
I’m not perfect… I still have CSS in the Porto Settings Style box. However, I do have it on my TODO list to remove all CSS from these boxes and put in the appropriate files. As I’ve noticed that I have loads of CSS that overrides each other. For example, I might have a <h1> Tag as font-size: 16px, but then is being overridden by another file that says may it font-size: 14px, but another file might say font-size: 20px. Not sure if any of that makes sense.
Summary
Anyway, in a perfect world I would avoid putting CSS in both custom.css and Custom Styles - And move any existing CSS in those locations to the appropriate files. But it’s not a perfect world, so I appreciate this might not happen. But it’s definitely something I want to change in my own project.