I think all CSS modules by default should end up in a specific CSS layer such as @layer modules or @layer css-modules. This would let you, in a global stylesheet before all CSS modules, declare exactly where modules should be placed in the order of layers, such as:
@layer reset, theme, css-modules, utilities;
Since CSS modules are about encapsulation they pair very well with @layer. A CSS module will then not only not affect global styles through global selectors, it would also have a well-defined specificity that can be overridden by CSS included through other methods.
By making this part of the CSS modules specification, tools and frameworks can also make assumptions about where they want to place other types of styles.
I think all CSS modules by default should end up in a specific CSS layer such as
@layer modulesor@layer css-modules. This would let you, in a global stylesheet before all CSS modules, declare exactly where modules should be placed in the order of layers, such as:Since CSS modules are about encapsulation they pair very well with
@layer. A CSS module will then not only not affect global styles through global selectors, it would also have a well-defined specificity that can be overridden by CSS included through other methods.By making this part of the CSS modules specification, tools and frameworks can also make assumptions about where they want to place other types of styles.