0

I'm currently trying to get a buttons style working on Github. It works through a chrome extension, and I'm also not terribly sure how to go about debugging Chrome Extensions.

Here is what I'm working with:

.octicon-class {
    background-image: url('chrome-extension://__MSG_@@extension_id__/');
    -webkit-filter: grayscale(100%);
    height: 16px;
    width: 16px;
    vertical-align: text-top;
}

I was considering using the !important declaration on some of the attributes in this method, but I've seen that it is bad style. Is there a better way to get the button to appear (as opposed to just text)

Rob W
  • 341,306
  • 83
  • 791
  • 678
kzisme
  • 1
  • 4
  • It's all about [CSS specifity](http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) – pbaldauf Jul 07 '15 at 14:54
  • Without knowing what HTML and existing CSS you are working with, it is really hard to help. – CodingWithSpike Jul 07 '15 at 14:55
  • So would using !important to override the other selectors - or would that be considered bad style? – kzisme Jul 07 '15 at 14:56
  • @kzisme It's considered bad style. Try to stay away from !important as much as possible. Only use it when you have no other option. Use specifity. – timo Jul 07 '15 at 14:58
  • Here is the current HTML http://pastebin.com/weht021b The button css is linked in the original post. @user1129884 is there a decent way to figure out what's the best way to approach selectors and specificity? – kzisme Jul 07 '15 at 14:58
  • 1
    @kzisme pbaldauf's linked URL does a decent job at explaining the concept. – timo Jul 07 '15 at 15:01
  • On an unrelated note, use relative urls and omit the `chrome-extension://__MSG_@@extension_id__/` part. – wOxxOm Jul 08 '15 at 17:51

0 Answers0