CSS extensions in h-smile engine. Part I. Style sets.

Style set is a named set of style declarations – it is a system of selectors and style definitions that are applied as the whole.

Style sets are declared by using @set at-rule:

@set my-table

{

  td { color:blue }

  td.highlighted { color:red }

}

table#my

{

  style-set: "my-table";

}

After this declaration <table> element with id="my" will get system of styles defined by the set. In this particular case all cells ( <td>s ) will have blue color and all cells of class "highlighted" will have color red.

If somewhere later in your CSS you will have definition:

table#my {  style-set: none; }

then it will drop definitions from the set my-table all together. In other words style-set is a switch of style sets.

:root

Element that has style set applied serves role of the root for selectors defined in the set. :root pseudo class being used in style set definition matches the element this set is applied to.

Specificity of selectors in sets.

Specificity of selectors inside style set is calculated by using standard CSS algorithm.

In presence of style sets an element is getting its style in two stages:  

1. by applying all style rules and attributes without style set – as usual.


2. if element gets some value of the style-set attribute then the element gets all matching style from the style set.

So styles inside style set are of larger importance/weight than ordinary styles.

Motivation

Style sets mechanism solves two principal problems of CSS:

1. They allow to define local and independent style systems for elements in the same DOM tree without need of using <frames>.




2. Style sets allow to reduce computational complexity of style resolution. In classic CSS all style rules that used by the document are placed in the single ordered table. Task of finding list of matching selectors for the element has computational complexity near O(n), where n is a number of rules in the table. And style resolution of the whole DOM tree is O(n * m * d) task. Where m is a number of DOM elements and d is an average depth of the tree. Style sets allow to reduce significantly n multiplier in this formula.

Style sets are actively used in so called Master Style Sheet of the h-smile engine. Master Style Sheet defines default rendering and behaviors of intrinsic input elements and components. See link above for more details.