Styles Import Order


While talking with some collegues I came to understand that no one really knows in which order the styles are imported in the web page.
This is difficult to understand in scenarios where you have web blocks inside your pages, because one would think that styles defined in the web block style sheet are the last ones to be imported, therefore have more priority than the page, espace and theme styles.
And so I went digging and this is what I found:

In fact the styles import order is:
  1. Web blocks
  2. Theme
  3. Web Screens
Which means that:
  1. Themes override web block styles
  2. Web Screens override theme and web block styles.

Why is this so? 
Because this way you can reuse web blocks and restyle them according to the application style guide.

Just be sure to check the reference documentation.