Re: CSS Hierarchies / Selector Nesting Proposal

On Thu, Jun 2, 2011 at 11:54 PM, Andrew Fedoniouk
<andrew.fedoniouk@live.com> wrote:
> Consider following rules that I have:
>
> input[type=button],
> button
>  {
>    style-set: std-button;
>  }
>
> @style-set  std-button
> {
>   :root { background: url(theme:button-normal); }
>   input:root { content: attr(value); }
>   :root:disabled  { ... }
>   ...
> }
>
> Note 'input:root' inside the style set, it defines
> style of the element itself when the style set
> is applied to the <input> element only.
>
> I am not sure how such situation is supposed to
> be defined with the '&' construct. Tag names in CSS selectors can
> appear only at the start of selector.
> The notation should support something like '&input', right?

Yes, it's intended that things like "&input" be supported.  The
restriction for tagname selectors to be the first part of a complex
selector is solely because we can't distinguish the start of a tagname
selector from the end of another selector.


> Another thing about style sets as named style collections. Here is an
> example of
> defining custom scrollbars:
>
> @style-set my-vertical-scrollbar
> {
>  :root {...}
>  .next {...}  /* all scrollbar parts ... */
>  .next-page {...}
>  .slider {...}
>  ...
> }
>
> And to apply such style set to scrollbars of some of elements is a matter
> of defining:
>
> div.scrollable
> {
>   vertical-scrollbar: my-vertical-scrollbar; /*name of style set*/
> }
>
> That is quite useful and popular construct.
>
> If to extend SASS idea further to support such things we need to allow style
> blocks to
> be legitimate property values on grammar level.

That's covered in my initial email as well.  You can potentially use
Mixins and Nesting together to achieve this goal.  It's definitely
useful, as SASS does this same thing.


> And yet I am not sure how SASS will be reflected in CSSOM. In general if you
> have
> something like this:
>
> #foo {
>  &>#bar {  ... }
>  &>#ozo { ... }
> }
>
> you will want to delete all contained rules when you delete "master" rule
> #foo.
> The same about other manipulations like cloning, etc.
> So what exactly that compound SASS style block is?
> Is it just a preprocessor (pure parse time)  feature or is it rather a style
> set - set of rules
> that are applied on all-or-none basis?

Also addressed in my initial email.  Within the CSSOM, nested rules
are exposed from the .cssRules property on the outer rule, identically
to how rules are exposed when nested inside of a @media rule.  So,
yes, if you delete the outer rule via the CSSOM, you'll delete the
nested rules as well.

~TJ

Received on Friday, 3 June 2011 07:07:46 UTC