720355 - Implement a new CSS property, 'class'

Status: RESOLVED WONTFIX

(Core :: CSS Parsing and Computation, defect)

Description

[spammed.user]

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:10.0) Gecko/20100101 Firefox/10.0
Build ID: 20120118081945

Steps to reproduce:

Many style sheets, especially in CSS3, require the same code to be written multiple times. This can be solved by adding a -moz-class property that would apply to any element with -moz-class:'className'; the class className.

Examples:

@-moz-keyframes {
    0% { -moz-class:'class1'; color:red; }
    20% { -moz-class:'class1'; color:green; }
    40% { -moz-class:'class2'; color:blue; }
    60% { -moz-class:'class2'; color:yellow; }
    80% { -moz-class:'class3'; color:orange; }
    100% { -moz-class:'class3'; color:white; }
}

.class1 {
    /*
     lots of properties and their values
     ...
    */
}
.class2 {
    /*
     lots of properties and their values
     ...
    */
}
.class3 {
    /*
     lots of properties and their values
     ...
    */
}
__________________ (once other browsers support this property):
-moz-some-selector {
    /*
     lots of properties and their values
     ...
    */
}
-webkit-some-selector {
    /*
     lots of properties and their values
     ...
    */
}
-o-some-selector {
    /*
     lots of properties and their values
     ...
    */
}
-ms-some-selector {
    /*
     lots of properties and their values
     ...
    */
}
some-selector {
    /*
     lots of properties and their values
     ...
    */
}

can be shortened to

-moz-some-selector {
    class:'myClass';
}
-webkit-some-selector {
    class:'myClass';
}
-o-some-selector {
    class:'myClass';
}
-ms-some-selector {
    class:'myClass';
}
some-selector {
    class:'myClass';
}
.myClass {
    /*
     lots of properties and their values
     ...
    */
}

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I don't think this is a good approach.  There are other approaches under discussion in the CSS working group; see discussion on www-style related to variables and mixins.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

And, to be clear, the main reason I think it's a bad approach is that CSS selectors are about matching -- class is one of the things they match on, but they're not intended to be used as only ".class", and selectors aren't anything like "classes" as they work in a programming language.  I think a mechanism like this encourages them to be used that way, which encourages people to avoid a lot of the power of CSS and bloat their markup with large numbers of unnecessary classes.