index.css file in react-create-app added to <head> as the last <style> elemnt. As I understand it, this is because mounting is a Recursive Process. Because index.css is at the bottom, its styles take precedence. It confused me.
According to my logic if I want to use .title {font-family: Roboto; font-size: 2.5rem} for all titles in my app, I will write this in index.css. But when I want to use other typeface for title in my <Article /> component saving font-size I will write mixin .article__title {font-family: Tahoma} in Article.css file. But it doesn't give the result I want. And the font-family won't be overwritten, because .title
takes precedence over .article__title.
Where and how should I use common styles that I can rewrite in components?
CSS cascading in React will be the same as if you were working with vanilla HTML -- at the same precedence level, the last rule to be defined wins.
...which can be fragile, so just like in plain HTML+CSS it's usually better and more maintainable to make your CSS rules have greater or lesser specificity, instead of depending on the order in which they appear.
For your example where you have .title taking precedence over .article__title (I assume because both classNames are on the same DOM element, and .title happens to be defined later), instead of trying to change the order of the CSS rules, change their specificity:
.title {/* default rules */}
.title.article__title {/* override rules */}
That will have the same results regardless of the order in which the selectors appear in your CSS files. (You can do the same using parent nodes instead -- a very common strategy in React is to have one set of global CSS rules, and then set specific additional classnames on the root level of each of your components which can override those global rules.
Or as a last resort, there's always !important. (But don't use !important, you'll just wind up with the same specificity problem later on but worse.)