[css3-regions] @region and specificity

   # The specificity of the selectors in a ‘@region’ rule is calculated as defined
   # in the CSS Selectors module (see [SELECT]). In other words, the ‘@region’ rule
   # adds an extra condition to the selector's matching, but does not change the
   # selector's specificity. This is the same behavior as selectors appearing in
   # ‘@media’ rules declaration blocks (see [MEDIAQ]), where the rule does not
   # influence the selectors' specificity.

The structure and usage of a design's region-specific styling is very similar to
the structure and usage of contextual styling (using descendant selectors), and
not similar to the structure and useage of media-specific styling. Given that,
I'm uneasy with using @media as an analogy here and discarding the specificity of
the region.

For example, if the author writes

   @region .first {
     h1 { color: purple; }
   }
   h1 { color: blue; }

The color will be blue, whereas if they write

   .highlight h1 {
     color: purple;
   }
   h1 { color: blue; }

it will be purple, even though these are very similar situations. Media-specific
styling is different because it doesn't switch on containment, as regions and
descendant selectors both do. (Also with @media there aren't selectors involved,
so there is no notion of specificity in the at-rule's context to begin with.)

On a related note, while I agree that in many cases it is convenient to have the
nesting structure of the @-rule, that applies to both regions and to general
element hierarchy. I would rather these two scenarios behave the same and address
nesting as a separate problem common to both.

~fantasai

Received on Tuesday, 27 December 2011 03:56:56 UTC