RE: [css3] Suggestion: Selector variables or "synonyms"

Brad Kemper wrote:

> I'm not sure what you are getting at here. If it is defining the  
> descendants, that can be done more simply, without the extra  
> brackets. I would do it like this:
> 
[...]
> > since everything within the @contant will have a specificity 100  
> > plus there own specificity on top.
> 
> No, I would not have some sort of magic change to the the specificity  
> because of the way the selectors were generated from a variable. That  
> just complicates it and makes it more confusing. There is nothing to  
> be gained by setting it any higher than its contents.


I see that we are seeing different things here and different constructions. I now understand what the placeholder is. Before delving into this I will clarify my part of the proposal. Please compare this CSS which I currently use in a CSS styled list menu.

http://css-class.com/test/demos/contant/original.css

with this CSS.

http://css-class.com/test/demos/contant/propose.css

Please note that I have changed the #navigation from the <ul> to it parent <div> to allow for the constant (my idea of operation) to operate. The propose CSS has a constant block.

@constant (div#navigation, div#menu, nav) {

/* each selector within this block has its' own specificity plus the specificity of the block that it occurs in */

}

I follow the propose CSS better within the constant block since it doesn't have #navigation appearing everywhere. The complexity of the stylesheet when chaining each of div#navigation, div#menu and nav together is greater.

http://css-class.com/test/demos/constant/original-added.css

The differences in size between the stylesheets is very small:

original.css = 4.62 kb
propose.css = 4.75 kb
original-added.css = 6.70 kb

But considering that this can apply to div#navigation, div#menu and nav in one hit. So this is sort of what Jens' was seeking.

1. Styling variable HTML with a CSS constant
2. Creating a smaller and easy to follow stylesheet which can be written quicker.


Brad Kemper also wrote:

> I'm not sure what you are getting at here. If it is defining the  
> descendants, that can be done more simply, without the extra  
> brackets. I would do it like this:
> 
> /* create constant called MYNAVS and assign selectors to it: */
> @constant MYNAVS( nav, #sidenav, #topnav )
> 
> /* now use MYNAVS as placeholders of those three selectors */
> MYNAVS  ul {list-style: none;}
> MYNAVS  li (float: left;}
> MYNAVS  a {display: block;}
> MYNAVS  a:link, MYNAVS a:visited {color: black; background-color:  
> yellow; }
> MYNAVS  a:hover {background-color: black; color: yellow; }
> MYNAVS  a:active { background-color:black; color:red; }


This has the extra MYNAVS proceeding the list menu type selectors which I wish to avoid. This MYNAVS has to be repeated in each selector of the CSS for the menu.

I am most likely getting the syntax all messed up but I hope it shows what I'm getting at. It could even be like media queries.

@constant nav (div#navigation, div#menu);

and

@constant nav (div#navigation, div#menu) {

/* each selector within this block has its' own specificity plus the specificity of the block that it occurs in */

}

The nav is the future HTML 5 <nav> element. Consider this. When we can use the <nav> element across many UA. It is only a type selector with a specificity of 0.0.1. Styling navigations usably involve selectors of greater specificity than normal page links. We may want to give this nav element some power.

@specificity nav (100);

Just some stuff to think about.


Alan

http://css-class.com/

Received on Thursday, 14 February 2008 16:49:15 UTC