Idea: Properties with Object Values

Introduction

What if the value of a property could be an object?

Syntax

JSON-based Option

Let us consider the following syntax with nested curly brackets:

div { prop: { x: 123; y: 456; }; }

which intends to communicate that the element:

<div id="el" class="cls" />

would have a style property, prop, with a value that would be an object with properties. The expression prop.x would be equal to 123 and prop.y would be equal to 456.

Dotted Property Name Option

Let us consider the following syntax with dotted property names:

div { prop.x: 123; prop.y: 456; }

which intends to communicate that the element:

<div id="el" class="cls" />

would have a style property, prop, with a value that would be an object with properties. The expression prop.x would be equal to 123 and prop.y would be equal to 456.

Object Model

With respect to adding this functionality to CSS, we might want to consider the CSSStyleDeclaration interface which provides the getPropertyValue() method which is specified as returning a CSSOMString value rather than an object value.

If getPropertyValue() returned an object value, then something like the following could work:

var element = document.getElementById('el');
var prop = element.style.getPropertyValue('prop');

console.log(prop.x);
console.log(prop.y);

Conclusion

I hope that these ideas are of some interest to the group. What do you think of the capability for properties to have complex objects for their values? Do any other syntax possibilities come to mind with which to express these ideas?

No implementation file, test, or entry point is named; this is a proposal for CSS syntax and CSSStyleDeclaration behavior. Start by reading the linked CSSOM and Web IDL sections, then determine whether the Working Group accepts either syntax and object-valued API; done would require an agreed specification direction.