5 Top Mistakes To Avoid While Writing CSS For A WordPress Theme

WordPress rules the Internet, for all the obvious reasons. It’s 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 released every day in the market, developers are looking for creative ways to tweak them to suit their own website needs.

Developers need to work with stylesheets to give their website a well-defined 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 all of them in detail:

1. 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 changes you are introducing in the CSS selector tags rather than the HTML page.

 

2. 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 functionally slowly. It also wastes your time and efforts. 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 what you could have got using that error-filled technique. But this would definitely save your time in placing different components and shortening CSS codes so that you can go on with your modifications in a clear manner.

 

3. Working on a 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 the wrong one, you can use a backup file to make things work again.

 

4. Forgetting Details about 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 are there to help you catch the skipped details right off the bat.

 

5. 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 selectors, let’s say h1 heading and no changes are reflected, we would advise 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 work 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.