Apologies for the confusing question wording. It was flagged as spam and almost deleted.
I will have numerous entries similar to these:
span#CNQM {
background: url(../../../../images/icons/sfc_CNQM.png) no-repeat top left;
}
span#HKBAM {
background: url(../../../../images/icons/sfc_HKBAM.png) no-repeat top left;
}
span#SWBAM {
background: url(../../../../images/icons/sfc_SWBAM.png) no-repeat top left;
}
span#DEAM2 {
background: url(../../../../images/icons/sfc_DEAM2.png) no-repeat top left;
}
span#SFCQM1 {
background: url(../../../../images/icons/sfc_SFCQM1.png) no-repeat top left;
}
span#SFCQM2 {
background: url(../../../../images/icons/sfc_SFCQM3.png) no-repeat top left;
}
span#SFCQM3 {
background: url(../../../../images/icons/sfc_SFCQM3.png) no-repeat top left;
}
The list is becoming difficult to manage.
Is there a more efficient way in CSS to handle this rather than maintaining such a long list? In a scripting language, I would create an array (CNQM, HKBAM, SWBAM, etc.) and iterate through them.
If the answer is simply "that's how it works," that's fine, but if there is a better approach, I'm open to suggestions. Thank you.