UM styles are too specific making styling very inefficient

  • Resolved eatbuildplay

    (@eatbuildplay)


    4 years, 8 months ago

    As you probably know when we write CSS our goal is to use the minimal number of selectors and minimal level of specificity to create the desired styling. Overuse of specificity is unfortunately something we sometimes see in plugins. UM falls into this category. The CSS styles used throughout the core plugin showcase a terrible practice of massive levels of overkill in specificity, take the example below:

    .um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line label .um-search-line {}

    That’s right that’s 6 selectors. Six. Six! Whoever wrote that is not qualified to do front-end development… send them back for retraining or fire them.

    To style UM requires using at 4, 5 or sometimes in the example above SEVEN selectors in order to override the aggressive and incredibly inefficient CSS use of the plugin.

    Please read up on CSS best practices and begin to strip out all this bloated CSS code to make it easier for extensions and themes to provide UM override styles.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter eatbuildplay

    (@eatbuildplay)

    As an example of a fix for the above overkill style:

    .um-directory .um-search-line {}

    This is already specific enough to target the search input in question because you are after all building the core plugin, so you’re only competing for specificity with other WP plugins at this level, how many of them will ever use “.um-directory”. Absolutely zero, so 2 selectors is enough to specify the target. 3+ is overkill and simply adds to the bulk of the stylesheet and then creates a real challenge in overriding styles. Here is how I had to specify more padding recently on a project with UM.

    Note the use of !important, utilized only because even after I used about 8 selectors to override default styles, you’re poor practice of using !important meant I also had to use the same poor practice.

    body .um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line label .um-search-line {
    padding: 10px 0 10px 0 !important;
    }

    Now how would this look if we used sensible style specificity? Well more like:

    .my-um-page-template .um-directory .um-search-line {
    padding: 10px 0 10px 0;
    }

    Plugin Contributor Champ Camba

    (@champsupertramp)

    Hi @eatbuildplay

    Thanks for letting us know about your observations.

    We have a public repository on GitHub so you can create a pull request and we’ll happy to review it.

    https://github.com/ultimatemember/ultimatemember/issues

    Regards,

    • This reply was modified 4 years, 8 months ago by Champ Camba.
    Plugin Contributor Champ Camba

    (@champsupertramp)

    Hi @eatbuildplay

    This thread has been inactive for a while so we’re going to go ahead and mark it Resolved.

    Please feel free to re-open this thread if any other questions come up and we’d be happy to help. ??

    Regards,

    Thread Starter eatbuildplay

    (@eatbuildplay)

    So you have no plans to change the poor coding practices used in Ultimate Member?

    How can you mark this as Resolved? It’s not.

    • This reply was modified 4 years, 7 months ago by frimodt.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘UM styles are too specific making styling very inefficient’ is closed to new replies.