WordPress Plugin CSS

tips on dealing with it

Alec   Morrison   |   @alphaalec

About Me

Engladian

Lead theme developer at Forge and Smith

I love hedgehogs

WordPress Plugin CSS

Plugins extend WordPress in many ways

Aesthetics ideally need to work wherever the plugin is installed

This can lead to problems

My Plugin CSS Experience

Working at Forge and Smith

Now, our example plugins...

However...

The Issues

1. Overly specific CSS

Gravity Forms

.gform_wrapper ul li:before, 
.gform_wrapper ul li:after, 
.gform_wrapper ul.gform_fields {
	margin: 0;
	overflow: visible;
	padding: 0;
}
.gform_wrapper ul li.gfield {
	clear: both;
}
.gform_wrapper li, .gform_wrapper form li {
	list-style: none outside none !important;
	margin-left: 0 !important;
	overflow: visible;
}
					

WooCommerce

.woocommerce #content input.button, 
.woocommerce #respond input#submit, .woocommerce a.button, 
.woocommerce-page #content input.button, 
.woocommerce-page #respond input#submit {
	background: gradient(center top, #f7f6f7 0px, #e0dadf 100%) 
	repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #c8bfc6;
	border-radius: 2px;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.075) inset;
}

.woocommerce .related ul li.product, 
.woocommerce .related ul.products li.product, 
.woocommerce .upsells.products ul li.product, 
.woocommerce .upsells.products ul.products li.product {
	width: 48%;
}
					

The Issues

1. Overly specific CSS

2. Order of HTML Elements

Tribe Events

The Issues

1. Overly specific CSS

2. Order of HTML Elements

3. !important

!important being used entirely too much

.single-tribe_events #tribe-events-gmap {
    height: 0 !important;
    margin: 0 !important;
    padding-top: 50%;
    width: 100% !important;
}

.woocommerce .woocommerce-error li, 
.woocommerce .woocommerce-info li, 
.woocommerce .woocommerce-message li {
    list-style: none outside none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.gform_wrapper li, .gform_wrapper form li {
    list-style: none outside none !important;
    margin-left: 0 !important;
    overflow: visible;
}
					

The Solutions

1. CSS Overrides

CSS Overrides: Example

#content[role="main"] a.button {
	background: none repeat scroll 0 0 #262626;
}

.woocommerce a.button {
	background: -moz-linear-gradient(center top , 
	#f7f6f7 0px, #e0dadf 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
					

CSS Overrides: Evaluation

Pros

Gets the job done quickly

Cons

• Horrible looking CSS
• Doubles up on CSS
• Only covering the up the problem

The Solutions

1. CSS Overrides

2. Plugin Settings

Plugin Settings: Example

Plugin Settings: Evaluation

Pros

• Can be user friendly (WooCommerce)
• Quick (Tribe)

Cons

Rarely fulfils what you want

The Solutions

1. CSS Overrides

2. Plugin Settings

3. Disable CSS, use own base styles

Disable CSS, use own base styles: Example

Disable CSS, use own base styles: Evaluation

Pros

• A complete solution; removes all issues
• Can repurpose original CSS
• Reusable from project to project

Cons

• Time consuming to complete
• Requires extensive QA and browser testing

The Solutions

1. CSS Overrides

2. Plugin Settings

3. Disable CSS, use own base styles

4. Communicate with your designer

Communicate with your designer:
Example

Communicate with your designer:
Solution

Solutions Summary

Which solution should I use?

Answer: any and all!

Good News!

I have some gifts for you

Gravity Forms CSS rewrite

SCSS/LESS rewrite available here: https://gist.github.com/forgeandsmith/8048759

Compiled CSS rewrite available here: https://gist.github.com/forgeandsmith/2cf1be2fe53577520341

Disable output CSS functions available here: https://gist.github.com/forgeandsmith/ad71dcd751d98e883d8f

WooCommerce Forms CSS rewrite

WooCommerce provides the code to disable their stylesheet here

You have three potential courses of action

1. Download WooCommerce's LESS stylesheets from the plugin folder
2. See if somebody had a crack at that already. For example
3. Have a go at building your own base styles from a blank slate

My Suggestions For Plugin Developers

Use a (unique) prefix for your classes and IDs

Have a disable options for your output CSS

Change layout by actually changing the layout

Don't use !important

Thanks for listening!

Any questions?

Alec   Morrison   |   @alphaalec