These days WordPress rules on the Internet for all the apparent reasons. It is not a secret that increasingly users are picking for it and make use of its fantastic themes to refurbish the overall look and feel of their website. Nonetheless, as progressively themes are coming up, developers are looking for more innovative ways to tweak them to fit their website needs. Developers want to work with style sheets to present their website a well-refined appearance. In a nutshell, they want to play around theme’s CSS file to make variations in the design aesthetics. However, as doing so, developers frequently making some errors that can make their theme function in a rag-tag manner. These errors can badly affect the user experience and visual appeal of a website. In this post, we are going to highlight 5 common mistakes the developers make any time they are writing CSS for their theme.

We will discuss about all of the mistakes in detail:

1. Not knowing the Correct Way of Placing Files

If you are new to CSS, it is significant to know the correct way of placing files and identify 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 in the theme folder. PHP file is accountable for anything the changes you are introducing in the CSS selector tags rather than HTML page.

2.  Adding up pointless Code while Writing CSS

This is a general error found between the majority of WordPress theme developers and designers. Adding up unnecessary codes or making code repetitions, not only presents your theme with cluttered look, however also make it functionally slow. It also wastes your time and efforts, which you have invested or else on some practical activities. Below is an example that will assist you in understanding 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 an enhanced way to do this, we can give these lines an ordinary name and also use modifier class to provide the title a unique appearance.

<h3 class=”some-title pop”>My title</h3>

Or, we can go for [email protected] 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 subsequent 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 outcome might not be severely different from what you could have gotten using that error-filled technique. However this would certainly save your time in placing different components and shorten CSS codes, so that you can go on with your modifications in a clear manner.

3. Working on a incorrect Template Module

Irrespective of how tailored and functional WordPress modular templates are as it comes to changing them, designers quite often commit errors by making these updates in the incorrect template module section. for instance: a lot of 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.

4. Forgetting CSS Details

regardless of being a master of CSS, there are times when developers overlook some of the basic rules that have an enormous bearing on the overall functioning of their project. Such as: it’s a rule that a selector have to be identified as an ID or CLASS except and until it’s an HTML tag. The below mentioned format describes the manner in which it must be laid out.

selector { property: value; property: value; }

It is compulsory 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 assist you in catching the skipped details right off the bat.

5. Several Choices while Writing CSS

There is a tendency between developers to allocate numerous references to a single selector. Given that more than one reference to a single selector can make information conflicts as several selectors start loading at the same time, convincing you to think which one to pick to get the pleasing results. If you are working with a selector, let’s say h1 heading and no adjustments are reflected, we would suggest you to go through the style sheet to see if the selector is provided with any other reference.