We are currently developing a new Magento 2 store.
Therefore we are going to use the default Luma theme and edit it to fit our needs. We need to write a lot of new css rules to fit our brand identiy.
What will be the best way to create css files?
Do we need to create 1 custom.css file and load that on every page? Or is it better to create a category.css, productpage.css and homepage.css etc file?
The main reason we ask this is due to performance.
In Magento 2, LESS is used in combination with Grunt to compile the LESS to CSS. I'd suggest to look into the following docs:
https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html
This explains how Magento 2 is used in combination with LESS, especially when developing your own theme.
-- EDIT --
To answer your question about one big or seperate .css files if you want to go with just plain CSS:
One big CSS is better performance wise.
Also, this may be interesting:
https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html
Magento 2 is using LESS to preprocess. So due to performance i would suggest to learn how to extend and change Magento own less code. Read more from: https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-overview.html
The best way entirely depends on your front-end developers and the workflow they work best with, there is no go to solution for this and many projects work differently.
I recommend using SCSS via Frontools and the Sass blank theme as they greatly increase productivity due to the default workflow being incredibly slow. But this is also personal preference as I much prefer working with SCSS over LESS.
As for whether it's better to create your own CSS files or use the existing - this depends on the size of your theme and again how your front-end developers like to work (there is a huge variety in how front-end devs work).
If you're only making smaller changes and/or the theme resembles the Luma theme then your best bet is to create _extend.less which will add your CSS on top of the Luma theme. The downside of extending is your styling is split up between your theme and Luma, also you're adding additional CSS on top of the Luma theme which is a waste and not great for file size.
Instructions on this can be found here - https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-guide/css_quick_guide_approach.html
If you're making a lot changes (such as keeping the majority of LESS styling but changing the styling) then you'll likely want to overwrite the existing CSS by adding the file you're editing into your theme.
More info on this can be found here - https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-guide/css_quick_guide_approach.html
My ideal way is to create all my own styling, this is because Magento rarely follows best practice so I find myself fighting Magento's code more than working with it. It also allows me to lint my code and ensure it uses best practices, when I extend or re-use Magento's CSS I can't test/lint it as it fails almost every test/lint.
For instructions on how to theme from scratch see my post here - Theming for Magento 2 - Starting from scratch
