This rule raises an issue when a CSS declaration is placed where CSS grammar does not allow declarations, such as at the top level of a stylesheet or directly inside a nesting at-rule without an enclosing style rule.
CSS declarations only apply when they appear inside a valid declaration container. In practice, this means they belong inside a style rule block or inside an at-rule that can directly contain declarations.
When a declaration is written in an invalid position, browsers discard it during parsing. The intended style is never applied, and the stylesheet may fail silently apart from the missing styling. This can lead to broken layouts, missing states, or inconsistent rendering that is difficult to trace back to the stylesheet.
This often happens during refactoring when a selector wrapper is removed or when nested rules are rearranged incorrectly. Move the declaration inside a style rule or into an at-rule that is allowed to contain declarations directly.
color: red;
@media all {
color: red;
}
a {
color: red;
}
a {
@media all {
color: red;
}
}