CODEWITHSUNDEEP
htmlcssdebugging
ccleve
ccleve

Reputation: 15779

How to debug CSS specificity problems?

I've developing an app with Vue, and a third-party template, and dynamic plugins, and all kinds of trickery. I'm have a really hard time with the CSS.

Often I need to style particular element on the page, an <input> for example, and I can't figure out how to write a selector that actually works. The input may have been created dynamically by some Javascript and may have had CSS applied programmatically.

So I go to Firefox Web Developer, click on the element, and see a bunch of CSS classes. I create a rule:

.myCustomClass {
  color: red;
}

put myCustomClass in the class="" tag in the <input>, and... nothing.

I'm thinking I need to prefix it like this:

.someOuterClass .someInnerClass .myCustomClass {
  color: red;
}

but that rarely works. Sometimes I give up and add !important. Sometimes that works, and sometimes it doesn't.

So my question is, can I examine the classes that I can see in Web Developer and somehow derive a rule that is specific enough that it will always work?

I've read about specificity, but it's not helping.

Upvotes: 4

Views: 835

Answers (2)

Bryce Howitson
Bryce Howitson

Reputation: 7690

Specificity is a PITA sometimes, especially when other 3rd party libraries are adding stuff to the mix.

Here are a few things you can try:

  • Make sure to add your styles to the END of the CSS. Theoretically, you can affect the order Webpack includes CSS (I've never tried it)

  • Add an ID not a class to a wrapper outside the elements you want to change. Then reference this ID in the CSS chain eg: #myAppID .className .subClassName {} Basically ID's are stronger than classes in CSS specificity. I would try to do this at a page/view level to make life easier.

  • If elements are already getting classes (as you see them in the inspector) try to reuse those classes with your "override" CSS. If the classes are modularized (Have a random suffix like someClass__34xft5) you shouldn't use those exact classes since they can change if the source is recompiled. In that case, use a "matching" selector [class^=”someClass__”] to match any selector with that prefix.

Not sure how deep you want to go, but here's an article about overriding Amplify-Vue prebuilt styling.

One caveat, if the CSS is being added inline via javascript somewhere, it's going to be very hard to override. You may want to use !important in conjunction with the above.

Upvotes: 2

Richard Uie
Richard Uie

Reputation: 161

"...can I examine the classes that I can see in Web Developer and somehow derive a rule that is specific enough that it will always work?"

Probably, but why bother? You're already adding class attributes to elements. Why not add inline style attributes instead? Adding a bunch of classes or ids just to create a specificity chain to touch up styles is pretty messy...inline styles are barely if at all worse and are clearer to understand.

Inline attributes are the most specific CSS instructions you can give.

Upvotes: 0

Related Questions