Usa i CSS per scegliere come target qualsiasi elemento che abbia QUALUNQUE due classi su di esso?

Question

Il nostro ambiente di produzione utilizza una tecnologia di adattamento che è incompatibile con più classi css. Ciò significa che è facile dimenticare e utilizzare due classi quando si disegna lo stile HTML e interromperlo una volta arrivato alla produzione.

Vorrei usare il CSS come modo per evidenziare quando qualcuno dimentica e applica accidentalmente due classi a un elemento.

Qualcosa del genere è il mio intento, anche se ovviamente non è valido. Esso dovrebbe evidenziare ogni elemento che possiede due classi applicate ad esso:

.*.* { /* not valid (I wish) */ 
    outline:2px dotted red; 
    } 

Capisco che questo avrebbe funzionato se sapessi le classi, il problema è che voglio bandiera QUALSIASI due classi:

.classA.classB { /* not good enough */ 
    outline:2px dotted red; 
    } 

Capisco che potrei farlo con JS e un bookmarklet, e forse questa è l'unica soluzione. Se è possibile con solo CSS, sarebbe meglio, in quanto contrassegna automaticamente le cose a tutti gli sviluppatori e al QA.

Answer 1

Per rimuovere più falsi positivi (ad esempio valori di attributi spaziali imbottita), è possibile usare questo selettore:

[class*=" "]:not([class^=" "]):not([class$=" "]) { 
    outline: 2px dotted red; 
} 

Questo ancora non filtra classi utilizzate in valori come class="foo foo" come sottolineato da Phrogz in la tua risposta, ma è meglio di niente, e penso che sia molto meno probabile che si verifichi rispetto agli attributi di classe con spaziatura di spazi vuoti.

Answer 2

Questo non è possibile utilizzando il solo CSS.

E, se posso dirlo, l'ambiente di produzione è stupido. I CSS senza classi multiple sono come un tag cloud con un solo tag consentito per articolo. Sconfigge alcuni degli scopi. Risolvi il tuo ambiente di produzione per non abusare del CSS in questo modo, invece di limitare correttamente gli autori, descrivendo semanticamente il contenuto.

Answer 3

Ho appena trovato una risposta accettabile:

[class*=" "] { 
    outline:2px dotted red; 
    } 

Ciò evidenzia qualsiasi cosa con uno spazio nel attributo di classe. Ottiene alcuni falsi positivi, perché a volte gli spazi in un attributo di classe si verificano legittimamente come risultato di un codice lato server leggibile, ma preferisco i falsi positivi ai falsi negativi.

Qualche idea migliore?