Best Way To Apply Classes with Icons & BG Images

How To
1

Hello lovely people!

I wondered what everyone does for reusable elements and how you apply classes to them?

For example, I have an element with a background image that I will use on multiple service pages. I would add a custom class to them so I can update them all when I make any edits.

But if I change a bg image, it changes them for each (as it is CSS); how would I make them unique? Would you leave the BG image out of the custom class blank and use the element ID to add the bg images or… :person_shrugging:

I would love to know how you do it and what is deemed best practice?

Thanks

Mick

2

The best way to apply classes with icons and background images is by using the .class-name-2 element.

The .class-name-2 element will add the class name from the first element to the second element and then append the value of that class name to it.

This means that you can use this technique to create multiple classes on one element without having to repeat them over and over again.

1 Like
3

Thank you Alexson,

So you would copy the original class and then add .copied-class–1, .copied-class–2 etc.?

4

Hi Mick,
I don’t quite understand Alexson’s approach, but I would generally do it as you mentioned:

Everything that is the same (the styling) goes in one class, what is different (the image), either each on the ID or alternatively in its own class.

However, while checking your SVG report, I noticed that many of the styles currently end up on the ID instead of the class… I will consult with Thomas about this.