WordPress rules the Internet, these days, for all the obvious reasons. It’s a no secret that more and more users are opting for it and making use of its fantastic themes to revamp the overall look and feel of their website. However, as more and more themes are sprung up, developers are looking for more creative ways to tweak them to suit their website needs.
Developers need to work with stylesheets to give their website a well-refined appearance. In a nutshell, they need to play around theme’s CSS file to make changes in the design aesthetics. But, while doing so, developers often commit some errors that can make their theme function in a rag-tag manner. These mistakes can badly impact the user experience and visual appeal of a website. In this post, I am going to highlight 5 common mistakes the developers make whenever they write CSS for their theme.
Let’s discuss about all of them in detail:
-
Not Understanding The Correct Way of Placing Files
If you are new to CSS, it is important to learn the right way of placing files and recognize the one you should work with. CSS files are located in the style.css file within the theme folder of WordPress. HTML code is placed in the index.php file and PHP files are found in the theme folder. PHP file is responsible for whatever the changes you are introducing in the CSS selector tags rather than HTML page.
-
Adding Unnecessary Code
This is a common mistake found among the majority of WordPress theme developers and designers. Adding redundant codes or making code repetitions, not only gives your theme a messy look, but also make it function slowly. It also wastes your time and efforts, which you have invested otherwise on some resourceful activities. Below is an example that will help you understand my point better.
.some-title { font-weight: bold; }
.some-other-title { font-weight: bold; color: red }
Instead of this, we can combine these lines just like this:
.some-title,.some-other-title{font-weight:bold;}
.some-other-title{color:red;}
There is a better way to do this, we can give these lines a common name and also use modifier class to give the title a unique appearance.
<h3 class=”some-title pop”>My title</h3>
Or, we can go for Sass@ extend. Sass is useful because it gives us reliable ways to give our selectors different names and also arrange them using comma-separated combos. This way there is absolutely no need for us to remember thier exact location. Look at the following example, to understand my point.
.some-title { font-weight: bold; }
.some-other-title { @extend .some-title; color: red; }
The following will be the output of the conversion from .scss to .css performed by preprocessors.
.some-title, .some-other-title { font-weight: bold; }
.some-other-title { color: red; }
The result might not be drastically different from the what you could have got using that error-filled techique. But this would definitely save your time in placing different components and shorten CSS codes, so that you can go on with your modifications in a clear manner.
-
Working on the Wrong Template module
Irrespective of how bespoke and functional WordPress modular templates are when it comes to modifying them, designers quite often commit mistakes by making these updates in the wrong template module section. For example: many a time user modifies comments.php file instead of comments-popup.php or any other file having identical names. You need to be very careful about the modular on which you are working or supposed to work. Even if you accidentally start working on a wrong one, you can use a backup file to make things work again.
-
Forgetting minor details of CSS
Despite being a master of CSS, there are times when developers forget some of the basic rules that have a massive bearing on the overall functioning of their project. For example: it’s a rule that a selector must be identified as an ID or CLASS unless and until it’s an HTML tag. The below mentioned format describes the manner in which it should be laid out.
selector { property: value; property: value; }
It is mandatory to include the braces, colon, and semi-colon with the line. Missing any of the detail can make things go wrong. Thankfully, CSS validators is there to help you catch the skipped details right off the bat.
-
Multiple Choices
There is a tendency among developers to assign multiple references to a single selector. Providing more than one reference to a single selector can create information conflicts as multiple selectors start loading at the same time, compelling you to think which one to pick to get the desirable results. If you are working with a selectors, let’s say h1 heading and no changes are reflected, we would advice you to go through the style sheet to see if the selector is provided with any other reference.
To Conclude
All said and done! I hope reading the above mentioned mistakes can help you working with WordPress themes efficiently. Now, that you are armed with this knowledge, you can start modifying your themes and add an edge to your WordPress site.