CSS-property-selector

by Schepp

HTML

Fiddle for Divya explaining the need for CSS-property-selectors. 

Real world use cases:

- Offering a and switching to a more readable design scheme
- Skinning/branding of existing designs (imagine "whitelabeled" web services)

The more complex the CSS and the cascade, the more pain a reskin of parts of it is. Currently you need to apply reskinning styles like background-colors, colors and fonts multiples times onto many selectors, since you need to respect the CSS cascade and need to take care of specificity.

e.g. I have a CSS here for a shop which is currently 4.000 CSS lines long. Since this shop is meant to be used by resellers implying their own branding, I have a second file that holds just all the backgrounds, colors and borders which gets imported after the main one. This file is autogenerated by a script that parses the main CSS and extracts all selectors with properties that match. This "branding"-file is 2.100 lines long, because of the cascade and because of an not all too modularized CSS. This file could be not longer than 20 lines if we had CSS-property-selectors to fetch and override properties in selectors.

CSS variables (http://dev.w3.org/csswg/css-variables/) might help here by setting them in an un-classed/classed root, but they are still in their infancy and are no general substitute.

CSS

body {
    background: url(whatever.jpg) no-repeat center top;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 66.7%;
}

h1,h2,h3,h4,h5,h6 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #000;
}

section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
    font-family: Arial, Helvetica, sans-serif;
    color: #666;
}

button {
    font-family: Georgia, "Times New Roman", Times, serif;
    background: #FCC url(gradient.png) repeat-x left top;
    color: red;
    border: currentcolor 1px solid;
}

/* 
imagine hundreds of further lines of code here
...
*/

body.highcontrast {
    background: #000;
    color: #000;
    font-size: 75%;
}

body.highcontrast *:not([color:#FFF]) {
    color:#FFF;
}

body.highcontrast *[background-color:],
body.highcontrast *[background-image:] {
    background: transparent;
}

body.highcontrast *[border-width:1px] {
    border-width: 2px;
}

body.highcontrast *[font-family:Georgia, "Times New Roman", Times, serif] {
    font-family: Tahoma, Geneva, sans-serif;
}