This question was initially posed to the @IEDevchat team as I wanted to get a browser manufacturer's view. Is there value in organizing CSS that targets vendor prefixes based on capabilities say via Modernizr ? - e.g: .text-shadow throw all vendor prefixes vs throwing all vendor prefixes regardless and let browser ignore? I am assuming the valu…

gistfile1.scss

/*
  Following example assumes scss and ability to target parents selectors.
 Credits : http://goo.gl/ubE2A &  http://goo.gl/AQPpY and 

*/

.mydeclaration {
  .nocssanimation & {
    /* old crappy browser */
    border: 1px solid #ccc;
  }
  .text-shadow.notouch & {
    /* Potential ability to add not only text shadow , but gradients etc.
    Limit your Big Shadows to non touch devices but one's that support text shadow. Also assumes there is some common elements with other declarations
     */
  }
}

/* With selector inheritance at compile time , the output will be */

.selector 1 {
  color: Red;
}

.text-shadow.notouch selector1, .textshadow.notouch selector n {
  /* Assumes text shadows are common for the site */
  text-shadow: 1px 2px;
}