In general, we don't have to ensure a given style order. Component styles (by default) will work independently of other styles in other components and in the order that the styles are processed.
The processing order of the Sass files is not guaranteed in the CLI, there is an order which is the order in which the CLI plugins (Webpack based) process the files but that could change over time as the CLI evolves.
One of the main goals of Angular styling is to provide style encapsulation, meaning that the styles on the SASS file associated to the component are only applicable to that style.
To understand how this works and why in general we don't need to worry about style order, let's take as an example this style in a component SASS file:
.active {
border-radius:4px;
}
This will be converted at runtime to something like:
.active[_concontent-c1] {
border-radius:4px;
}
What goes inside the angle brackets is a unique attribute identifier that increases the specificity of the style and ensures its only applicable to elements inside the template of that particular component.
One of the main benefits of this mechanism is that the order on which the component styles are processed is not critical because the unique identifier will ensure they will not interfere.
Note: There are ways to do not have that unique ID applied to the style if needed
Have a look at this video to see more details of this mechanism in action.
