8 CSS Blunders That Are Frequently Made by a WordPress Developer

Unanimously, WordPress have won an unimaginable trust of millions when it comes to relying upon it for a website. From Fortune 500 companies like eBay, SONY, Best Buy to leading media houses such as The New York Times, Forbes, CNN, and numerous entities trust and rely on WordPress.

A website is the most useful marketing tool that lay a firm foundation for any business. Further, it allows an organization to perform different business activities to accomplish goals. Therefore, this one goes without saying, a website needs to be cautiously designed and developed by a seasoned professional.

However, sometimes even an experienced professional still makes CSS mistakes while customizing WordPress theme. Maybe the mistakes are made due to the pressure of meeting deadlines and commitments.

If you are one of such professionals that are overburdened with commitments, then this blog is for you. In this write-up, I am not going to teach you how to code, I am just going to highlight some common mistakes that often happen while writing CSS for WordPress themes. You can remember these errors to avoid them in the future.

Need for Theme Customization

Before getting into the details of CSS mistakes, you should (beginners) first understand the need for WordPress theme customization. With the steep rise in the competition, businesses need to stay updated with the ongoing marketing trends. Therefore, customization is done.

WordPress theme customization directly refers to writing the CSS in which a developer make all the required changes. However, CSS is the soul of your website, that is why it needs to be modified cautiously. If customization is not done in a proper manner, then it can prove disastrous for your site and your business too.

Let’s see the mistakes, one by one so that you can avoid them in your very next project.

1. Not Writing Style Sheet Information

While customizing WordPress themes, I noticed that developers often ignore writing style sheet information. Later on, this ignorance becomes the root of all the troubles. So, it is crucial to provide information to your style sheets to make your CSS code more meaningful.

Always do prefer to write accurate information such as Title, Tags, Author, URL information, and so on to your CSS file. It will give a clear sense and save your precious time when you tackle another alteration in the future.

For instance, take a glance at this Code sample:

/*

Theme Name: XYZ Website
Description: XYZ Header Section
Author: Chris Martin
Author URI: http://www.xyz.com/
Tags: XYZ, Website

*/

2. Common Errors While Writing CSS

On 1stwebdesigner.com, I found some handy tricks that you can implement to avoid common writing mistakes. Take a glance at them one by one:

Avoid Creating Redundant CSS

Bad Practice:

span {font-size: 12px; color: red;}
p {font-size: 12px; color: red;} 

Good Practice:

span, p {font-size: 12px; color: red;}

Do not Mix Tag Names with ID or Class Name

Bad Practice:

p#container {color: red; font-size: 8px;} 

Good Practice:

#container {color: red; font-size: 8px;}

Margin & Padding Positions

Bad Practice:

#container {  margin-top: 10px;  margin-right: 2px;  margin-left: 5px;  margin-bottom: 14px;  }

Good Practice:

#container {margin: 10px 2px 5px 14px;}

3. Ignoring Browser Compatibility

Every browser differs to each other when it comes to viewing your web pages. Therefore, the code written during CSS customization should strictly adhere to all the CSS standards so that it can work on the different browsers without any issue.

Developers mistakenly ignore browser compatibility while writing CSS will rise following issues:

  • Text and links get scattered while moving the mouse over particular link
  • Inconsistent layout on different browsers
  • Effects do not appear to be the same on different browsers and often stop working entirely

Whenever you code, code responsibly. Otherwise, it may severely hit the business and reputation of your clients. Moreover, before making the modified pages live, check it properly on localhost on different browsers.

4. Wrong Selectors

Countless captivating websites across the world runs on CSS and CSS3. It is the base helps designers and developers create engaging websites providing rich user experience.

There is no need to tell that CSS is broad and before using the selector, you must understand the difference so that you can use those selectors prudently.

For instance, instead of customizing the #content selector, if you customize the #content-text, then it can prove disastrous. So, always work carefully with selectors to avoid such mistakes.

5. Choosing Wrong Template Module

To avoid getting unwanted results, you need to pay extra attention while selecting the desired template module for customization. You may face the situations when you realize that instead of making changes in comments.php, you have done changes in popup.php. And, it can totally take you to the state of confusion when you find you are not getting the expected results.

Well, by creating a full backup of your entire CSS stylesheet; you can restore back the changes when needed.

6. Wrong File Placement

This mistake frequently happens to those who are new to the world of CSS. The developer must have an idea of the proper file placement. You must be well aware of the CSS selector tags that you are using for customization and which PHP file is receiving those changes.

Additionally, you must be aware of WP theme folder as it includes the entire CSS style file along with some PHP files. Further, the main index.php contains the main HTML code in which you link your CSS style sheets.

7. Overlooking the Importance of Validation

You are a professional, and it will be needless to make you aware that careless working (whatever be the reasons for it) can overburden your task and put you in trouble later on.

One of the common mistakes is “Misspelling” while writing CSS. This error is more likely to happen, whether you are an experienced professional or a beginner. Well, you can also call it as simple human error. Though, no need to worry as this kind of mistakes can be quickly caught up with the aid of CSS validator tools.

With the help of online tools like W3C free CSS Validator, you can validate your CSS code to ensure its correctness. Further, you can use CSS Lint to write error-free CSS code. Use of these tools can save your valuable time for manual checking and help you to keep code standards high.

Being a responsible developer, you need to pay attention towards making silly mistakes like writing 10pc instead 10px in your code.

8. Forget to Shrink CSS Files

Avoid doing things in a hurry. Otherwise, you may have to suffer re-work which could probably disturb your work schedule and make your task complicated. Once you finished writing CSS for a WordPress theme, you should shrink CSS files with the help of some CSS compressor. Compressing CSS support browsers to render your pages faster.

You can use online tools such as CSS Compressor and CSS compressor & Minifier for this purpose.

Conclusion

This write-up highlights the most common CSS mistakes that are likely to happen by experienced developers. I hope you enjoyed reading this blog. Do not forget to share what kind of mistakes you did while writing CSS for any WordPress theme.

Abhyudaya Tripathi

AbhyudayaTripathi is an avid digital marketer with over 8 years of experience. As an Associate Director at ResultFirst, a Digital Marketing Company, he helps businesses optimize ROI by suggesting the essentials of web design. His area of expertise covers everything that comes under the umbrella of digital marketing. Off duty, he loves to travel and devour delicious Indian street food.

You may also like...

Leave a Reply