March 2, 2015 Off

5 Destructive CSS Practices You Need To Ditch Now While Creating WordPress Theme

By in Random

A great WordPress website is an outcome of appreciable design combined with a flawless set of code. Since building a website using a CMS like WordPress isn’t an uphill battle, and we can see many people playing around CSS hoping that they will come up with an outstanding theme design they have been actually looking for. However, while achieving their goal, there are some key mistakes which they commit simply because they aren’t knowledgeable enough about the ways to pick up a specific element, properties to be applied, or they just don’t put efforts to get the hang of CSS.

To design something visually attractive WordPress theme you don’t only need the good eye for the CSS designing terms, but also have a good mind to implement it. In this post, I have compiled a list of 5 common CSS errors web designers often make while developing WordPress theme and ways to fix them.

1. IDs Vs Classes

IDs Vs Classes

CSS gives us two attributes to set the style for HTML elements. These attributes are: IDs and Classes. The major difference between the ID and Class is that ID can be used to identify one element, whereas Class is used to identify more that one element. Webmasters often get confuse when it is appropriate to use CSS Classes and when they should use IDs. It is worth noticing that an ID’s CSS is an HTML element, followed by a hash mark (#), and the ID’s name. This is how it looks.

#unique-element{
position:relative;
margin:0 auto;
width:800px;
background-color:#000099;
font-family:Arial,
Verdana,Helvetica;
}

{
margin-top:4px;
margin-right:12px;
margin-bottom: 5px;
margin-left:10px;
}

As far as classes are considered, they are followed by a dot (.). Below is an example for this:
.non-unique-element{font-size:12px;margin:5px;display:inline;}

2. Avoiding Shorthand Properties

Avoiding Shorthand Properties

Look at the following property list:
#selector {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}
Have you noticed anything wrong with this image? Many designers and developers commit this error. Redundantly adding lines more or repeating code than once can simply destroy your endeavor. Fortunately, CSS Shorthand Properties come as a deceptive factor here. Now, look at the code below. It’s worth noticing that how we’ve reduced our code to three lines.

#selector {
margin: 50px 0;
}
We can also do this for background properties, just like this:
background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top;
Using CSS Shorthand Properties, it will be like:
background: url(background.png) repeat-y center top;

Shorthand CSS is a great way of improving efficiency of your work and also lets you manage your code well.

Grouping Similar Style

There are times, when you’ll have style declarations that are much alike. In such a scenario, you can style them under a single group. Let’s say, you heading and paragraph tags which have common specifications such as padding, margin, and background related properties. For this, you can list all related elements in a comma-separated list just like the example shown below:

h1, h2, h3, p{margin:0 0 20px 4px; padding:5px; background-color:#FF0000;}

3. Using 0px Instead of 0

Consider the case where you want to add a 10px margin at the bottom of a specific element. Most of the webmasters might prefer to do something that looks like the following:

#selector { margin: 10px 0px 10px 0px; }

Never ever do this. It’s a massive mistake to add px after 0. This is something which can increase the overall size of your file, which is not in the favor of your website performance.

4. No Fallback Fonts

No Fallback Fonts

To create something really breathtaking, it is mandatory for web designers to move beyond those web-safe fonts (such as Arial, Serif, Georgia etc.) I agree that they have their own merits, but there is always a chance to try some other high-quality fonts such as Helvetica. However, when trying something new, it is always recommend to safeguard yourself to maintain the consistency of your website. Font Stacks come as a decisive factor here to manage the way your site is displayed to the user.

Font stacks are a best way for developers to leverage the benefits of fallback fonts for the browser to display if the user does not have the required font installed.

#selector {
font-family: Helvetica;
}

This is how it can be expanded with the help of fallback fonts:

#selector {
font-family: Helvetica, Arial, sans-serif;
}

The code above explains that if any user doesn’t have Helvetica font installed in their system, they can still explore your website in Arial. If they don’t have Arial either, your website will be automatically loaded to sens-serif font.

Fallback fonts are an ideal solution for controlling the way your website should be rendered.

5. Excess of Whitespace

Whitespace

The majority of CSS coders make use of whitespace in their code to enhance its readability. As we know that space matters a lot when it comes to determining the overall size of your website. Hence, a lot of it can be removed, without sacrificing the readability aspect. For this it is recommended to get rid of all the line breaks and excess characters. This will help you a lot in condensing your code and reducing the overall size of the file.

Conclusion

These are some of the deadly CSS mistakes which can hamper the quality of your dream WordPress theme. Steer clear them when applying design to a website.

Author Bio: Maria Mincey is an software developer for Xicom Technologies, a CakePHP development company which delivers most comprehensive web applications and solutions for different industry verticals.

About: maria:
Maria Mincey is an software developer for Xicom Technologies, a software development company which delivers most comprehensive web applications and solutions for different industry verticals.

Tags: ,

Comments are closed.