WordPress is super-flexible but retains its shape nonetheless. Coding standards are one of the ways which helps it do that.

According to the WordPress Core Handbook, CSS standards are set up to “create a baseline for collaboration and review within various aspects of the WordPress open source project and community. Files within a project should appear as though created by a single entity.”

image_01_css_mistakes

Despite all your preventive measures, inconsistencies and errors will always want to worm their way in the longer or more complex WordPress theme development projects. In an effort to make debugging and front-end development easier on WordPress CSS developers, here’s a simplified list of most common errors even experienced developers will overlook while writing CSS for WordPress themes.

First off, here are some general best practices and guidelines:

  • Keep the code legible and consistent.
  • If the CSS is to be written by a team, agree upon a writing/formatting style with your members and stick to it. Also, your clients might want to work with it later and will appreciate your fastidiousness in the beginning.
  • Insert plenty of comments to describe unusual/non-standard code. This will enhance legibility and make editing easier later on.
  • Choose a declarations order that works best for your script (positioning-box-other, alphabetical, or anything else). Use it throughout the code.
  • Concatenate your code to reduce redundancy.
  • Use plenty of whitespace to improve readability.
  • Extend the same formatting considerations to preprocessors.

Now that we have the general guidelines of writing good CSS covered, let’s see what we can do to improve CSS writing for WordPress. Let’s start with :

Wrong Selectors

There are broad and location-specific selectors for a reason. Know the difference and use them wisely.
A simple error like customizing the #content-text selector instead of #content can be disastrous, and it happens more than you think. Instead of writing in #content-text and making all the changes and tweaks you just made in your theme visible to the audience, you should rather cut them away and paste it in the more appropriate #content tag.

Wrong Template Module

The multiple modular templates exist to give you more specificity, but it also makes everything more complex. Forgetting which template module you are supposed to be making changes in is more prevalent than it should be and needs to be edited later.

Experienced developers often have the modules and templates sorted perfectly through years of work, but they slip sometimes anyway. It would be good to know exactly what’s the purpose of (this specific) line of code, look up the codex to check if there’s a template module for that, and add the code to that module instead. For example, instead of making popup related changes in comments.php, just make those changes in comments-popup.php.

Forgetting to Validate

It’s not that big a deal: We work long hours and with many languages, and the human brain can only take so much. So sometimes we slip up and forget not just the etiquettes but basic grammar of writing CSS too. Needless to say this simple mistake can cause a bucket load of trouble later on.
This is where validation really saves our necks. Tools like CSS Lint and others are good for writing clean, error-free CSS too. For maximum efficacy, use the ‘lint roller’ tool after every major change and save and make the corrections immediately.

Spelling Errors

Spelling errors are a cause of majority of errors, regardless of what language you are writing in. CSS is comparatively easier, than say, JavaScript, but that’s a matter of personal opinion. The point is, it’s incredibly easy to miss a letter and say ‘em’ instead of ‘rem’; ‘pc’ instead of ‘px’ and so on. Anybody can make these mistakes. But since all em, rem, pc, and px are technically correct units, they’ll all be processed and give entirely different results. And looking at any of them out of the context will make them look normal and not like an error at all: This is why it’s so difficult to catch them.
Again, this is simple human error which can be caught up on early with the help of CSS validator tools. They’ll catch the spelling mistakes and any other semantic errors you may have made.

Media Queries

Responsive web design wouldn’t be half as easy if it weren’t for CSS media queries that let us degrade DOM to fit a page to different screen sizes. The best (and most effective) practice here is to add break-points and test above and below it thoroughly. You would also do well to group your media queries by media at the very bottom of your CSS script, unless you are writing it for wp-admin.css core file. Also: always assign maximum and minimum width.

Long Story, Short.

These are 5 of the most common nuisances developers face while writing CSS for a WordPress theme:

  • Choosing the wrong selectors.
  • Customizing the wrong template module, or simply neglecting to customize the template module (they are there to give you more specificity and control, use them).
  • Forgetting to validate CSS.
  • Spelling errors: which could have been solved had you validated your CSS.
  • Not using minimum and maximum width properties with media queries.

Final Thoughts

Everybody can make a mistake, but experienced WordPress developers have a lot riding on their expertise and finesse so it’s in our best interest to minimize these mistakes whenever we can. These mistakes may seem too trivial to be made by a professional, but the truth is they can happen (even to the best of us).

Share your experiences writing CSS for WordPress, tell us in the comments section.

Author:

Tracey Jones is working at HireWPGeeks Ltd. as a professional WordPress developer. When she is not developing websites, she helps her clients to hire experienced WordPess developers from the team of 150+ experts. She has been involved in writing blogs and articles related to web development and new web design technologies in her free time.