Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to override an external library without !important?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #265309
    ThierryVilmart
    Participant

    I am using bitters to add stuff on components, like shadows on inputs. However, when I want to customize my components, I must override the values that are set by bitters.

    I can use !important but it is recommended to avoid it when possible for the sake of structure. In general specificity gives priority. So perhaps there is a trick to make the a new rule more specific.

    How to override a library without using exclamation mark important?

    #265310
    Paulie_D
    Member

    Without some code we really can’t help.

    However, specifity or the CSS cascade will help.

    On the other hand whatever “bitters” is, if it’s using inline styles then !important is, essentially, your only option.

    #265320
    ThierryVilmart
    Participant

    bitters is not inline. It is an sass library, part of bourbon, a popular SASS mixins library.
    http://refills.bourbon.io/components/

    My problems can be simplified to making the class “my-nice-input” more specific and to take priority without using important.

    Problem 1:

    input[type="submit"] {
      border-color: blue;
    }
    
    .my-nice-input {
      border-color: red exclamation mark important;
    }
    

    Problem 2, the full problem:
    Be more specific than the rule with an id selector all-text-inputs for defining inputs in bitters see below.
    I think id selectors are taking precedence.
    https://github.com/bigardone/phoenix-react-redux-template/blob/master/web/static/css/bitters/_forms.sass

    It would be nice if you can solve problem 1 or 2 above.

    #265448
    JeroenR
    Participant

    Without an example it’s hard to say. But let’s assume you use a custom stylesheet, then make sure you use CSS selectors with at least the same selector as the style you want to override, or make it more specific. I understand you don’t want to use important. I’m not a big fan of using IDs for styling as well.
    So you can either use your own added classnames, the same CSS selector, or a more specific CSS selector using the context your element is in.
    And then make sure your custom stylesheet is loaded later then the library you use.

    #265459
    ThierryVilmart
    Participant

    An id will have a higher specificity, as said in the CSS specification.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.