Have you ever had a situation where your css just doesn’t seem to be working. You know you added the styles, but they just refuse to show up in the inspector? Fun fact: It might just be your browser’s adblock stylesheet.
What’s adblock doing to my stylesheet?
Hopefully you use good namespacing when you create classes etc, but sometimes it’s just unavoidable (I’m looking at you, legacy projects).
After a bout of debugging and headscratching that seemed to last forever, I discovered that it was my browser’s adblocker that was actively blocking elements with certain classes and IDs. That’s understandable, given the adblockers purpose. But on the other hand, you might want to check that your code doesn’t include blacklisted classes and IDs. There’s about 1500 listed! Of course, turning adblock off for particular sites is a much needed alternative to browsing this list. But that doesn’t help your users…
Here’s a taster of some of the blacklisted items, note that some could be considered namespaced. A lot relate to cookie usage:
.widget-subscribe
#EUCookie
#WP-cookie-info
#cl-banner
.cc-banner
#itv-cookie-notification
.wrapper--cookies
.back-to-top
.rss-feed
.btn-twitter
.fb-btn
img[alt="facebook"]
Seeing that adblock has a stylesheet , it might be one to add to your dev teams todo list. Whilst these classes and IDs may not be used in your markup, they may very well be used in third party plugins. That could be anything from a wordpress plugin, to some cheap html theme you’ve bought, or a javascript plugin.