CSS @import not working

Since long time, I was believing that I know how to use CSS @import rule but I wasn't.
Today, and after few tries, I figured it out! IT MUST BE IN TOP OF CSS FILE in order to work as stated in W3 specifications

Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid.

So, the following snippet results

override.css

span { color: green !important; }  

style.css

span { color: magenta; }  
@import url('override.css');

result

lorem ipsum

Instead we should have this

override.css

span { color: green !important; }  

style.css

@import url('override.css');
span { color: magenta; }  

result

lorem ipsum