This file is oriented towards react-based project.
If you just starting a project and it has no special performance requirements, it is recommended to choose css-in-js solution, as it integrates and scales better with React (no need for webpack loaders, including css files in html, processing them, easier to use external libraries with components).
Architecture part for now)At first, try to mimick your file path, so it would be easy to find a style for appropriate React component.
I.e., in case of scss, if React component is placed on src/components/Button.js, put scss in styles/components/button.scss.
In case of css/css-modules it is best to place css files in the same folder as React component, and import it in javascript code.
It is best to make utility classes first (doesn’t mean you shouldn’t make classes for components). Bootstrap is a good example for it. Good candidates for utilities - grid system, layout (text-align, etc.), colors, background-colors, borders, margins, paddings, text styles (bold, underline, etc.). It might even have a positive impact at the overall UX due to the more consistent colors, margins, etc (if you create margins separately for each component, there are more chances they would be different, thus creating inconsistency).
Depending on a project it might be useful to reuse existing library (https://css-tricks.com/need-css-utility-library/, http://basscss.com/#basscss-flexbox, etc.)
For complex/unique(hard to reuse) component/layout styles, it is recommended to stick with BEM methodology (always using the same methodology, even if it too complex for current project, might be beneficial in a long run, as you don’t have to learn a new one each time you switch projects).
https://www.styled-components.com/ is currently a de facto standard for css-in-js. It has a big community, frequent update, and since recently supports object styles. PS. Make sure use use babel-plugin for styled-components.
While css-in-js solution doesn’t need utility classes, it’s still best to reuse the same colors/padding and margin sizes/breakpoints, etc. Most of these can be stored as a theme (https://www.styled-components.com/docs/advanced#theming), but can be just plain js modules with constants.