CODEWITHSUNDEEP
htmlcss
user1050619
user1050619

Reputation: 20856

Debugging CSS with multiple CSS files

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?

Upvotes: 0

Views: 136

Answers (2)

morkro
morkro

Reputation: 4655

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

Upvotes: 1

Giacomo1968
Giacomo1968

Reputation: 26066

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
}

Upvotes: 1

Related Questions