Re: [mediaqueries] [css-variables] [css-device-adapt] Scope in CSS

On Sun, Apr 5, 2015 at 7:02 AM, Andrea Rendine
<master.skywalker.88@gmail.com> wrote:
> Hi everybody. (Happy Easter to those who believe)
> I don't know if someone has proposed such a thing, nor if it is possible on
> a technical POV, so I'll throw it out and let's see what happens.
> As I can see, Media Queries define blocks which don't contain CSS
> properties, but nested selectors along with their instructions.
> I also see that media conditions can rely upon a variable aspect, which is
> @viewport, and I also saw that someone proposed using variables in media
> queries. This is "risky" because it introduces the problem of solving
> possible circular dependencies (e.g. @viewport being rewritten in a
> viewport-based MQ, or antagonist MQs) and it would be the same with
> variables, which would otherwise be quite useful.
> In scripting languages (e.g. Javascript) there is the concept of scope and
> scoped variables: nested instances, e.g. functions, inherit variable values
> from outer level (scope), but var instances defined inside functions that do
> not affect their homonyms in outer scopes or in sibling scopes.
> I'd say it could be the same for CSS, at least for variable aspects such as
> @viewport and maybe proper variables.
> "A variable defined in a block of instructions, or a property for a
> @viewport instruction, only affects other blocks at the same level of
> variable selector or @viewport instruction itself." Thus:
[snip]

Unfortunately, this misses how variables actually work in CSS.  Your
proposal is attempting to give variables a lexical scope according to
the stylesheet they're defined in, but "variables" in CSS actually
have a dynamic scope according to the DOM tree - a "variable" is just
a custom property on an element, which acts exactly like any other
property: it cascades with other declarations setting the same
property, it inherits, it can be set from multiple places, etc.  The
var() function just retrieves the value of the given custom property
on the element and substitutes itself with it.

So no, we can't do any sort of scoping along the lines you suggest
without completely changing how variables work in CSS.

~TJ

Received on Wednesday, 8 April 2015 22:12:22 UTC