Typical Mistakes Even Experienced Developers Make Writing CSS for WordPress Themes
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.”
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 :
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.
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.
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.
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.