Debugging CSS with multiple CSS files

Question

In our application we use Bootstrap and there are multiple CSS files that are used.

Recently, I had a issue where there was a border created around a input box. The border for the CSS for input types were over-ridden in a particular CSS file.

I tried to use the Chrome DEV tools to identify which CSS file that input box was picking (for color) but for some reason it was not identifying the correct CSS files. For borders, shape and size it was mentioning it was inheriting from the parent but it never mentioning which is the parent CSS file.

Is there a better tool which correctly points the CSS that the component is using?

I find Chrome Dev tools sufficient. Just make sure when you inspect an element, you go to the side panel to view all the CSS applied to it (it shows both the applied and the overridden ones, including which files they came from) — blurfus
– blurfus, Commented Jun 7, 2014 at 19:56

Giacomo1968 · Accepted Answer · 2014-06-07 19:58:00Z

1

Is there a better tool which correctly points the css that the component is using?

Firebug is great & very well developed. But works only in FireFox, which should not be a big deal for your basic CSS debugging purposes. In general there is no one good tool to debug things like this. You will always be jumping around from tool to tool to get things right. It’s just the nature of front-end web development.

But in general, might not have to even touch the parent CSS to deal with this issue. Just target the element in CSS—if it is not already being targeted—and use !important to force your new setting to override others from parent styles.

However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

Here is an example code that would force outline: none to all input elements:

input {
  outline: none; !important
}

You can even add border: 0px solid; to the mix as well:

input {
  border: 0px solid; !important
  outline: none; !important
}

edited Jun 7, 2014 at 19:58

answered Jun 7, 2014 at 19:52

Giacomo1968

25.3k11 gold badges78 silver badges106 bronze badges

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

1 Comment

Aylen Over a year ago

Not only Firebug, but I also personally find Firefox devtools to be much easier and more intuitive to use than Chrome devtools.

morkro · Accepted Answer · 2014-06-07 20:15:12Z

1

I tried to use the Chrome DEV tools to identify which CSS file that input box was picking (for color) but for some reason it was not identifying the correct CSS files. For borders, shape and size it was mentioning it was inheriting from the parent but it never mentioning which is the parent CSS file.

In general Chrome Developer Tools shows exactly which .css-files are used and from which element the styles are inherited.

Can you maybe provide an example with your exact problem?

enter image description here

edited Jun 7, 2014 at 20:15

answered Jun 7, 2014 at 19:55

morkro

4,7055 gold badges28 silver badges35 bronze badges

3 Comments

morkro Over a year ago

Sorry I can't make comments yet. :/

blurfus Over a year ago

It is an answer actually. Demonstrating why chrome dev tools shows exactly what the OP is looking for and asking if there is a reason why this is not enough to meet the needs

user1050619 Over a year ago

@morkro: I had a issue last week that got fixed with help of a senior dev..I get this often and I will post the moment I find one

Collectives™ on Stack Overflow

Debugging CSS with multiple CSS files

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related