Title: CSS Specificity issues
Last modified: February 6, 2019

---

# CSS Specificity issues

 *  Resolved [chinaraj](https://wordpress.org/support/users/chinaraj/)
 * (@chinaraj)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/css-specificity-issues/)
 * Hi,
    I was wondering about two things that affect overriding the default css 
   styles.
 * First, if your plugin absolutely needed to load your stylesheet in the footer
   which means that it will always trump the theme’s styles and anything added to
   the customizer’s Add CSS feature.
 * Secondly, the use of overqualifying selectors for example the inputs have their
   classes .yikes-easy-mc-text and .yikes-easy-mc-email, why not just apply the 
   styles to these classes instead of using .yikes-easy-mc-form .yikes-easy-mc-text.
   The .yikes-easy-mc-form isn’t necessary. Also things like using .yikes-easy-mc-
   form [input type=”text”] instead of just styling the class you gave it .yikes-
   easy-mc-text.
 * Just a thought, but it could prevent developers from using the anti pattern of
   using !important to override the styles.
 * Thanks

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

 *  Plugin Contributor [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/)
 * (@yikesitskevin)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/css-specificity-issues/#post-11175799)
 * Hi [@chinaraj](https://wordpress.org/support/users/chinaraj/),
 * Great question.
 * First, the plugin doesn’t load its styles in the footer (WordPress doesn’t allow
   this by default) but it does load the styles when the shortcode is generated.
   So if you’re using the form in your footer then maybe that’s why it looks like
   the styles are loaded there.
 * Second, I think it’s correct that we try to prefix all of our styles with `.yikes-
   easy-mc-form`. It helps make sure that our styles don’t affect other areas of
   your site. However, I am _completely_ with you on our use of `input[type="text"]`.
   This is a really annoying style because CSS gives it such a high priority. I 
   wish we used `.yikes-easy-mc-text`/`.yikes-easy-mc-email` for our text field 
   styles.
 * To be honest, the styles in this plugin are quite outdated and could really use
   some refactoring.
 * However, all of our styles can be overridden in CSS. We don’t use the `!important`
   flag and you shouldn’t need to use it to override anything.
 * We have a few ways of allowing you to filter the styles. For example, we have
   a hook that allows you to completely exclude our styles if you’d like. You can
   also add custom classes to your fields so you can hook into those via CSS.
 * Hope that helps. Apologies if the styles are a bit annoying.
 * Cheers,
    Kevin.
 *  Thread Starter [chinaraj](https://wordpress.org/support/users/chinaraj/)
 * (@chinaraj)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/css-specificity-issues/#post-11175898)
 * Hi,
 * Thanks for the quick reply Kevin.
    Well I have tested with using the shortcode
   at the bottom of a blog post and in the footer. Most styles override easily but
   the inputs are the trouble makers specifically the padding declaration. My padding
   declaration either in the theme or customiser is never used which is why I had
   to use !important.
 * I don’t think adding my own styles would help in this situation becuase I would
   still need to add a selector more specific like a id, which I really don’t want
   to do. I also don’t want to remove all your styles either, as they are pretty
   decent out of the box.
 * I know people prefix their styles for namespacing reasons but your class names
   are so specific I doubt others would be using those names.
 * If I’m wrong about the padding on the inputs, could you just supply a sample 
   css declaration of you overriding the padding for the inputs so I can test.
 * I first tried this:
 *     ```
       .yikes-easy-mc-text,
       .yikes-easy-mc-email {
          padding: 12px 24px;
       }
       ```
   
 * and then
 *     ```
       .yikes-easy-mc-form .yikes-easy-mc-text,
       .yikes-easy-mc-form .yikes-easy-mc-email {
          padding: 12px 24px;
       }
       ```
   
 * It didn’t work without applying important. Here’s screenshot of my inspector 
   panel.
    [https://www.dropbox.com/s/yt3kr022g63bth8/Screenshot%202019-02-06%2011.31.56.png?dl=0](https://www.dropbox.com/s/yt3kr022g63bth8/Screenshot%202019-02-06%2011.31.56.png?dl=0)
 * This happens whether the shortcode is in the footer or in the blog post.
 * Thanks
    -  This reply was modified 7 years, 3 months ago by [chinaraj](https://wordpress.org/support/users/chinaraj/).
 *  Plugin Contributor [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/)
 * (@yikesitskevin)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/css-specificity-issues/#post-11175947)
 * Hi [@chinaraj](https://wordpress.org/support/users/chinaraj/),
 * I’m having success using this CSS to change the padding (without using `input[
   type]` or `!important`.
 *     ```
       .yikes-mailchimp-container .yikes-easy-mc-form .yikes-easy-mc-email, 
       .yikes-mailchimp-container .yikes-easy-mc-form .yikes-easy-mc-text,
       .yikes-mailchimp-container .yikes-easy-mc-form .yikes-easy-mc-address {
           padding: 0;
       }
       ```
   
 * I prefixed everything once more with the `.yikes-mailchimp-container` preceding
   the `.yikes-easy-mc-form`.
 * Cheers,
    Kevin.
 *  Thread Starter [chinaraj](https://wordpress.org/support/users/chinaraj/)
 * (@chinaraj)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/css-specificity-issues/#post-11176144)
 * Hi Kevin,
    oh by the way I like your handle [@yikesitskevin](https://wordpress.org/support/users/yikesitskevin/)
   😀 Yes that would work because it is even more specific but I think, in my humble
   opinion, that it’s just as bad as using !important so I will use the !important
   as it’s just the one padding declaration as I have other styles on those selectors
   as well and don’t want to do more ‘damage’ than necessary.
 * Thanks again for your quick responses.
 *  Plugin Contributor [yikesitskevin](https://wordpress.org/support/users/yikesitskevin/)
 * (@yikesitskevin)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/css-specificity-issues/#post-11176218)
 * Hi [@chinaraj](https://wordpress.org/support/users/chinaraj/),
 * Thank you 🙂
 * I am not a CSS expert but adding specificity is the _correct_ way to override
   a style… Right? Why would that be as bad as using the _incorrect_ way to override
   a style (i.e. using the `!important` flag)?
 * That doesn’t make sense to me 🙂
 *  Thread Starter [chinaraj](https://wordpress.org/support/users/chinaraj/)
 * (@chinaraj)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/css-specificity-issues/#post-11176366)
 * Hi [@yikesitskevin](https://wordpress.org/support/users/yikesitskevin/)
 * Maybe incorrect/correct and bad/wrong are the well wrong words to use.
    But both
   ways should ideally be avoided because the code wasn’t supposed to be written
   with that kind of specificity in the first place.
 * Things are supposed to cascade more naturally following an ITCSS architecture,
   from less specific to more, and maybe more component base following saying OOCSS
   or Atomic CSS.
 * So I prefer using the !important on a single property that place all my styles
   in a even more specific selector declaration which could potentially cause more
   unforseen problems for me later on.

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

The topic ‘CSS Specificity issues’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/yikes-inc-easy-mailchimp-extender_a1c7e5.
   svg)
 * [Easy Forms for Mailchimp](https://wordpress.org/plugins/yikes-inc-easy-mailchimp-extender/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/yikes-inc-easy-mailchimp-extender/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/yikes-inc-easy-mailchimp-extender/)
 * [Active Topics](https://wordpress.org/support/plugin/yikes-inc-easy-mailchimp-extender/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/yikes-inc-easy-mailchimp-extender/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/yikes-inc-easy-mailchimp-extender/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 6 replies
 * 2 participants
 * Last reply from: [chinaraj](https://wordpress.org/support/users/chinaraj/)
 * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/css-specificity-issues/#post-11176366)
 * Status: resolved