CSS Specificity issues

  • Resolved chinaraj

    (@chinaraj)


    5 years, 10 months ago

    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

    (@yikesitskevin)

    5 years, 10 months ago

    Hi @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

    (@chinaraj)

    5 years, 10 months ago

    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

    This happens whether the shortcode is in the footer or in the blog post.

    Thanks

    • This reply was modified 5 years, 10 months ago by chinaraj.
    Plugin Contributor yikesitskevin

    (@yikesitskevin)

    5 years, 10 months ago

    Hi @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

    (@chinaraj)

    5 years, 10 months ago

    Hi Kevin,
    oh by the way I like your handle @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

    (@yikesitskevin)

    5 years, 10 months ago

    Hi @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

    (@chinaraj)

    5 years, 10 months ago

    Hi @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.

Tags