Which is better attribute selector or using 2 classes?

[supermario]

Hey guys,

Using the Icomoon app you can choose to use an attribute selector such as [class^=”icon-“] or a class name.

My question is, which is better using the attribute selector or using 2 class names (ex: .icon .icon-help) ?

Is there a way to test CSS selector performance? and not just how fast a page loads?

Thanks,
Super Mario

[miguelzuleta]

So if you have the classes in something that looks like this…

<i class="icon icon-magic"></i>

…specificity and performance between the selectors [class^=”icon-“] and .icon are pretty much the same.

I would use .icon mainly because its easier to read organize when you set your styles for all the different icons. Check out what I mean below:

https://codepen.io/miguelzuleta/pen/vjXPRJ?editors=1100

[Author]

Posts