Embraced rulesets

Hello!
 
I'd like to propose something for the CSS3 syntax regarding recursive rules within declaration blocks. I've sent this email to Bert a couple of months ago, but got no reply, so I thought I'd try this list out. 


This following example will clear it out: 
 
Before: 
form {
  overflow: hidden; 
}
form select, 
form input.text, 
form textarea {
  border: 1px solid #d8d2c7; 
  font: 11px Tahoma, sans-serif; 
  color: #333; 
}
 
After: 
form {
  overflow: hidden; 
  select, 
  input.text, 
  textarea {
    border: 1px solid #d8d2c7; 
    font: 11px Tahoma, sans-serif; 
    color: #333; 
  }
}
 
Please note that this is a simplistic example. Basically, what happens is the inner-rules are being concatenated to the parent rule, just as if there was whitespace in the "before" declaration. There could also be the the option to specify element linking options either at the end of a parent-rule selector or at the beginning of an inner-rule selector. Example: 
 
Before: 
ul#nav>li {
    color: red; 
}
ul#nav a:hover {
    text-decoration: none; 
}
dl#foo>dt {
    color: blue; 
}
dl#foo>dd {
    font-weight: bold; 
}
 
After: 
ul#nav {
  >li {
    color: red; 
  }
  a:hover {
   text-decoration: none; 
  }
}
dl#foo> {
  dt {
    color: blue; 
  }
  dd {
    font-weight: bold; 
  }
}
 
This would greatly help when we have to define an entire CSS file for elements within another specific element, during development.  Please let me know what you think, and whether this idea will be escalated to be discussed with the rest of the CSS3 team. 
 
Thanks, 

Mihai Alexandru Bîrsan
Developer
GRAPEFRUIT

tel/fax: + 40 232 233066, 233068
mobile: +40 724 363680
www.grapefruit.ro

Received on Monday, 30 July 2007 12:40:52 UTC