!important styles about sharingbuttons.io HOT 8 CLOSED

If the structure of your CSS is correct, this should not be a problem or causing side-effects.
When someone want to override the buttons without having to change the source of this script, it is not possible anymore with these '!important'.

In my vision; '!important' is never a good idea if the structure of the overall website is correct.

from sharingbuttons.io.

I agree with @xoniq , using "!important" should try to be avoided in most cases.

from sharingbuttons.io.

Sure, you don't want to do anything that'll get in the way of your cascade, but there are definitely legitimate uses for !important. For context, this note was because of changes made to a.resp-sharing-button__links. I agree it probably the !important isn't necessary - the reason for it here would be to protect against something like a {color: #000 !important} but in my opinion anyone who wants to do that should have to figure out their own workaround ;)

from sharingbuttons.io.

@olets if you have an '!important' like that there is already something wrong with the CSS structure itself. Of something is overriding the global 'a' there is the error. Extensions should only have CSS concerning it's container. And if you want an extension to honor your global style, this should be overridden on a proper way.

from sharingbuttons.io.

just gonna give my 2cents...

i agree there are time when !important are valid, but these are only from things like .hidden .hidden--mobile` etc

other than that, things like BEM and SMACCS also agree that, if possible, it is preferable to not have nested classes or !important; both of these things make customising the css harder.

from sharingbuttons.io.

Ha I mean yes, it's true that !important can be a sign of beginner css coding. In a case like this, where people are including an outside module and counting on the buttons to look a certain, its purpose would be to make it really hard for the site styles to interfere with the sharingbuttons styles. For example,

a.resp-sharing-button__link,
a.resp-sharing-button__link:hover,
a.resp-sharing-button__link:focus {
    ... !important
}

(with as and !importants) would make it really impossible for the site styles to accidentally mess up the buttons.

As you've all said, the usual goal is to be just as specific as necessary, and no more. mxstbr originally had

.resp-sharing-button__link,
.resp-sharing-button__link:hover,
.resp-sharing-button__link:focus {
    ...
}

and I just wanted to make sure he saw that when I changed it to .resp-sharing-button__link {...} (in #48) we lost some of the specificity he'd had before. I think we all agree that !importants aren't needed here :D

from sharingbuttons.io.

(I've wanted to use the bitmoji github plugin for so long!!:)

from sharingbuttons.io.

Thanks for the discussion everybody!

from sharingbuttons.io.