I have a widget in plugin that will display a list of items <li> and I'd like to add one color to those items as option (color picker)...

The question here, do I throw that color as a:

 <style>.color {color:#fff;}</style> 

Or add it inline to each item:

<li style="color#fff;"></li>

How would you do that if this is your plugin? I'm talking about performance/Google score here.

Thanks...

I have a widget in plugin that will display a list of items <li> and I'd like to add one color to those items as option (color picker)...

The question here, do I throw that color as a:

 <style>.color {color:#fff;}</style> 

Or add it inline to each item:

<li style="color#fff;"></li>

How would you do that if this is your plugin? I'm talking about performance/Google score here.

Thanks...

• plugin-development
• theme-development
• performance

1 Answer 1

I would personally go for using a class to apply colour rather than an inline stylesheet. This way if you need to change the colour being applied to the list element then you can just that once in the class and every list element will show the correct colour, otherwise you need to go through and change every inline style on the list elements.

I'm not sure how much difference between those two methods it would make from a performance / Google site speed score really, it depends on what level of detail you were examining performance. The class will certainly make it quicker to edit so that method would be the one I would go for.

Hope that helps!