In the case of 10 Kb files those approaches won’t make any noticeable difference. But when you have large code bases consider how often changes would be made to them: in most cases it is sensible to split your files into two bundles — one for libraries or files that are not going to be updated any time soon, and the other for project-specific code, that is very likely to be tweaked in the course of the time following the release of the project. Thus you leverage caching and don't force the users to download the whole CSS or JS codebase every time you make some small adjustment.

It's a case where you should use your best judgement. You may want your marketing landing page to load faster, so probably wouldn't include your account section css there. You can also lazy-load the My Account assets on the login page.

Depends on how likely the user is to go to their account when they're logged in. :) Generally, I'd say split that into two stylesheets, especially if your site allows access to people without accounts, since non-users would be downloading the account styles for no reason.