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.
- The topic ‘Stop using !important in your CSS’ is closed to new replies.