CSS et propriétés alternative

Bonjour à tous.

Soit une balise qui doit avoir une forme par défaut et accidentellement une variante utilisée rarement.
Soit par exemple le cas où les tableaux devront toujours avoir un aspect suivant les propriétés 1 à 50 sauf accidentellement une variante peu utilisée sur le site où ils ne devront avoir aucune des propriétés 1 à 50, mais devront avoir uniquement les propriétés 51 et 52.

Pour une plus grande rapidité d’affichage doit-on écrire :

table:not(.variante)
{
propriété-1 ;
propriété-2 ;
propriété-... ;
propriété-49 ;
propriété-50 ;
}
.variante
{
propriété-51 ;
propriété-52 ;
}

ou bien :

table
{
propriété-1 ;
propriété-2 ;
propriété-... ;
propriété-49 ;
propriété-50 ;
}
.variante
{
pas-propriété-1 ;
pas-propriété-2 ;
pas-propriété-... ;
pas-propriété-49 ;
pas-propriété-50 ;
propriété-51 ;
propriété-52 ;
}

Merci pour vos explications.
Modifié par Pyanepsion (04 Nov 2015 - 08:13)

Bonjour,

Personnellement, je pense que le sélecteur "table:not(.variante)" va causer des problèmes de maintenabilité en raison de son poids (classe + élément).

Pourquoi n'utilises-tu pas tout simplement deux classes ?

.variante1
{
propriété-1 ;
propriété-2 ;
propriété-... ;
propriété-49 ;
propriété-50 ;
}
.variante2
{
propriété-51 ;
propriété-52 ;
}

Ainsi :
- poids de sélecteurs allégés
- tu ne cibles pas un élément particulier (table)
- pas de duplication inutile de nommage (.variante à 2 endroits sinon)
Modifié par Raphael (04 Nov 2015 - 08:41)

Nous nous trouvons ici dans un cas très particulier. Les tableaux vont toujours utiliser la variante variante1 sur toutes les pages du site sauf sur quelques pages où en plus de la variante variante1 (multicolore), il y a un tableau avec la variante variante2 (orange).

http://img11.hostingpics.net/pics/509997table.png

Selon la philosophie du style en cascade, s'il n'y avait pas eu le cas particulier de ces quelques pages, il serait apparu cohérent de définir le tableau (table, th, tr, td, etc.) avec les propriétés communes 1 à 50 et il aurait été ridicule de définir table puis variante1 pour ne toujours écrire ensuite que <table class="variante1">.

Or, au cours du développement est apparu le cas rare du second tableau en orange (table, th, tr, td) qui ne suit pas du tout l'aspect du tableau général.

D'où la question : que faut-il alors écrire dans le cadre de la meilleure optimisation possible ?
Modifié par Pyanepsion (04 Nov 2015 - 10:20)