Stop using !important in your CSS

  • wube

    (@wujek_bogdan)


    9 years ago

    I’ve set up a select2 library on my site. I’ve noticed that select2 styles are broken. It happens because of um.min.css – you also use select2 and in order to override select2 styles you used tons of !important in your css. This is wrong. These rules not only overwritten your select2 fields styles, but also all other select2 instances.

    I know that select2 styles are a bit crappy, and select2 is hard to style, but there are better techniques.

    First of all, use select2 themes (search for themes in the select2 docs) and write your own theme – do not overwrite global, generic styles.

    Secondly, always use CSS specificity instead of !important, so basically, add an ID or a class to a wrapping element and use this class in order to “target” the select2 element. Like this: “#ultimate-member-id .select2”. Thanks to this !important will no longer be needed.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Champ Camba

    (@champsupertramp)

    9 years ago

    Hi @wujek_bogdan,

    Thanks for letting us know. We are working to improve the styles. We will discuss this as a team. For now, i suggest that you exclude the um.min.css file where the issue occur.

    Regards,

    Thread Starter wube

    (@wujek_bogdan)

    8 years, 9 months ago

    I can exclude this file (actually I already did it :)), but UM also prints some styles in <style> tags. I cannot exclude these ones. They’re hard-code and they’re not wrapped in any hook.

    PS
    If you’re working to improve styles then maybe you could use some CSS methodology? For example BEM?

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Stop using !important in your CSS’ is closed to new replies.