Gravity Forms CSS Specifications Are Obnoxious

[ad_1]

I'm not looking for support, but I wanted to rant about a development issue I keep running across and thought it might make a good topic regarding development best practices.

Take a look at the distributed CSS that ships with Gravity Forms so they can style their form buttons:

.gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper button.button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)), .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    --gf-local-bg-color: var(--gf-ctrl-btn-bg-color-primary);
    --gf-local-radius: var(--gf-ctrl-btn-radius);
    --gf-local-border-color: var(--gf-ctrl-btn-border-color-primary);
    --gf-local-border-style: var(--gf-ctrl-btn-border-style-primary);
    --gf-local-border-width: var(--gf-ctrl-btn-border-width-primary);
    --gf-local-border-block-start: var(--gf-local-border-width) var(--gf-local-border-style) var(--gf-local-border-color);
    --gf-local-border-block-end: var(--gf-local-border-width) var(--gf-local-border-style) var(--gf-local-border-color);
    --gf-local-border-inline-start: var(--gf-local-border-width) var(--gf-local-border-style) var(--gf-local-border-color);
    --gf-local-border-inline-end: var(--gf-local-border-width) var(--gf-local-border-style) var(--gf-local-border-color);
    --gf-local-shadow: var(--gf-ctrl-btn-shadow);
    --gf-local-color: var(--gf-ctrl-btn-color-primary);
    --gf-local-column-gap: var(--gf-ctrl-btn-icon-gap);
    --gf-local-cursor: pointer;
    --gf-local-display: inline-flex;
    --gf-local-font-style: var(--gf-ctrl-btn-font-style);
    --gf-local-font-weight: var(--gf-ctrl-btn-font-weight);
    --gf-local-font-size: var(--gf-ctrl-btn-font-size);
    --gf-local-font-family: var(--gf-ctrl-btn-font-family);
    --gf-local-height: auto;
    --gf-local-letter-spacing: var(--gf-ctrl-btn-letter-spacing);
    --gf-local-line-height: var(--gf-ctrl-btn-line-height);
    --gf-local-min-height: var(--gf-ctrl-btn-size);
    --gf-local-min-width: auto;
    --gf-local-opacity: var(--gf-ctrl-btn-opacity);
    --gf-local-padding-y: var(--gf-ctrl-btn-padding-y);
    --gf-local-padding-x: var(--gf-ctrl-btn-padding-x);
    --gf-local-text-decoration: var(--gf-ctrl-btn-text-decoration);
    --gf-local-text-transform: var(--gf-ctrl-btn-text-transform);
    --gf-local-width: auto;
    align-items: center;
    -moz-column-gap: var(--gf-local-column-gap);
    column-gap: var(--gf-local-column-gap);
    cursor: var(--gf-local-cursor);
    justify-content: center;
    min-inline-size: var(--gf-local-min-width);
    opacity: var(--gf-local-opacity);
    text-align: center;
    -webkit-text-decoration: var(--gf-local-text-decoration);
    text-decoration: var(--gf-local-text-decoration);
    text-transform: var(--gf-local-text-transform);
    vertical-align: top;
}

That's 4000 characters Gravity Forms uses to set up styles on their form buttons. ~2k of which is just in the CSS specification alone. 6 different targets, with the longest target requiring 300 characters.

Their goal is probably to try and ensure that their default button styles are accessible across as many themes as possible. That being said, one of the best parts of WordPress is the ease of customization. I think it's an important thing to keep in mind when developing themes and plugins, ease of customization (to a certain degree).

[ad_2]

7 Comments

Howdy_McGee says:
August 8, 2024 at 5:06 pm
Before someone says to just use `!imoprtant` – that’s an antipattern.
Pcooney13 says:
August 8, 2024 at 5:18 pm
[https://docs.gravityforms.com/gform_disable_css/](https://docs.gravityforms.com/gform_disable_css/)
They took away the option in the settings to disable the css but you can still add this function to remove gravity forms css output.
tomato_rancher says:
August 8, 2024 at 6:12 pm
Every few versions it’s a fight to update styles. As time goes on, I find it’s easier to convince the designers to scale back expectations rather than bend GF styles into something super custom.
Lianad311 says:
August 8, 2024 at 6:43 pm
I agree, their CSS is horrible (Events Calendar plugin is even worse in my opinion). Years ago I just made my own SASS file partial for Gravity Forms and spend a few hours and just built everything out that needed adjusting. Really easy now on new projects.
The easiest way to overwrite all of that is to just toss an ID in front, that will overwrite like 9,000 levels of classes/css. I just have 1 main id on a wrapper on my page, like id=”main-wrapper” for example. Then in my SASS partial for Gravity Forms, I just have #main-wrapper wrapped around everything I need to overwrite. I don’t think I had to use an !important anywhere.
#main-wrapper {
.gform_field {
}
.etc {
}
}
cjmar41 says:
August 8, 2024 at 8:58 pm
I don’t always target **.class .class .class.class.class div span span.class input** to override properties with !important, but when I do, it’s Gravity Forms.
https://i.redd.it/g2ujfmlk7ihd1.gif
Chags1 says:
August 8, 2024 at 8:59 pm
Honestly i haven’t no issues with it, the IDs stay the same and nothing gets messed from version to version if you use the IDs they give the elements
wordofthebored says:
August 9, 2024 at 9:06 am
Agreed.
I have the same gripe with woocommerce. It’s CSS is atrocious and overly complex to override without massive specificity or resorting to !important.
Disabling it all is an option but for most use cases that’s overkill.

How to change currency in Woocommerce settings?

Publishing failed. Could not update post in the database.