How to debug CSS specificity problems?

Question

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.

in FireFox can't you right click "Inspect Element" and see all the styles being applied on the left side? Then you can see if a style for color (or whatever property) is being applied by any stylesheet on the page. Find the rule that's not crossed out, copy that selector and modify it to be more specific or match it and import it after. — zgood
– zgood, Commented Mar 4, 2019 at 23:51
Can you make sure that the css file is being linked to in the html or that the style element is in the head? — evolutionxbox
– evolutionxbox, Commented Mar 5, 2019 at 0:14

Bryce Howitson · Accepted Answer · 2019-03-05 01:23:26Z

2

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.

answered Mar 5, 2019 at 1:23

Bryce Howitson

7,78824 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zgood Over a year ago

This is all good advice I think. Especially the correct use of the !important flag... its meant to override inline styles, not just thrown on when you can't figure out CSS specificity like most devs use it for.

Richard Uie · Accepted Answer · 2019-03-05 00:03:59Z

0

"...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.

edited Mar 5, 2019 at 0:03

answered Mar 4, 2019 at 23:55

Richard Uie

1614 bronze badges

2 Comments

zgood Over a year ago

I probably wouldn't recommend this approach. This seems very messy and hard to manage. You lose the advantage of css classes (you would be repeating the same styles all over the place) and how would you write a :hover or :before style inline?

Richard Uie Over a year ago

I wouldn't recommend it either, it's more supportable at the level of the OP.

Collectives™ on Stack Overflow

How to debug CSS specificity problems?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related