[CSS-idea] CSS with classes.

Here is the idea for how to extend CSS by classes or style sets. So to 
get CSS++ - object oriented CSS.

I propose to add construction named style-set.
Style set is a named block of style definition rules:
block similar to the @media section.

Style set is defined as:

@style-set MyStyleSet
{
   :root
   {
     background: blue;
     border:1px solid;
   }
   :root > li
   {
     color:red;
   }
}

There is also style-set attribute that is used for
applying style set to the element and all its descendants:

ul#MyListWithStyleSet
{
   style-set: MyStyleSet;
}

:root pseudo element inside style set is getting resolved to the element 
that has style-set attribute defined. So style set establishes style 
system local to the element. Such style system (declarations) is 
isolated from the rest of styles.

So if we have following markup
<ul id=MyListWithStyleSet>
   <li>...</li>
</ul>

and style set declaration above then

<ul> will get blue background and <li>s will be rendered in red color
of the text.

Therefore style sets give CSS:
1) better support components/modularity in CSS.
2) establishes style systems local to some element (the one that has 
style-set:name; declared )
3) have set of styles that applicable on all-or-none basis.

Style sets are inheritable:

@style-set MyOtherSet < MyStyleSet
{
   :root
   {
     background: green;
   }
   :root > li
   {
     color:yellow;
   }
}

There is one more plus of style-sets - they allow to reduce 
significantly number of lookups needed for style resolution.
Especially critical for sites that use a lot of style declarations.

Style sets are implemented and used in htmlayout. SS there allowed
to define effectively  stylings of intrinsic input elements: buttons, 
lists, tree-views, etc. See Master Style Sheet of HTMLayout [1]

Cheers.

-- 
Andrew Fedoniouk.

http://terrainformatica.com

[1] 
http://www.terrainformatica.com/wiki/doku.php?id=h-smile:built-in-behaviors:master_style_sheet

Received on Wednesday, 2 July 2008 00:13:28 UTC