WordPress and CSS are two technologies that are dictating the trends on the web today. And of course, they are interconnected in a big way. WordPress largely uses CSS for the appearance of the websites built on it and if there are any errors in the CSS code, it shows in the website’s appearance.
The error-ridden code is not comprehensible to the web browsers at all. And they respond to these errors by giving your web pages a very shabby appearance that has a huge impact on the facets of user experience and visual character of the site. And truth be told, making CSS mistakes while setting up websites in WordPress is a fairly common scenario.
Here are the 5 mistakes that can prove to be most consequential while writing CSS for a WordPress theme:
1. Not Setting the Right Margins on Headings
Among designers, it is common knowledge that you need to keep the space above a heading (h2-h6) wider than the space below this heading. Also, the other heading tags have to be styled in the appropriate manner because we can find their constant presence throughout the content when it comes to displaying the subheadings. There are a number of popular themes out there which fail on this aspect. One mistake what I have seen people make often is not being able to set a distinguishable font size among heading tags. There aren’t many changes from h1 to h2. Having them properly formatted can set up a good tone for content attraction.
2. Adding Redundant Code
Many designing and developing folks fall prey to this mistake. Redundantly using the same lines more than once only leads to the code getting cluttered, without adding any sort of real value to it. Also, by repeating yourself while writing CSS code, you are only going as far as wasting your precious time. Moreover, the repetitive code adds up for frequent calling to the server that sums up for more time. Here is an example for you to consider:
.some-title { font-weight: bold; }
some-other-title { font-weight: bold; color: red }
Now, these two lines of code can be combined to form this:
.some-title,.some-other-title{font-weight:bold;}
.some-other-title{color:red;}
Now, we can instead give them a common name and also use a modifier class for the title in order to display it in a separate colour.
<h3class=”some-title pop”>My title
Or, we may also choose to go with Sass @extend.
With Sass, we have the advantage that the selectors have different names and because they are arranged in comma-separated combos, we don’t have to memorise their location. We can take this example to elaborate:
.some-title { font-weight: bold; }
.some-other-title { @extend .some-title; color: red; }
Now, when the preprocessor converts the code from .scss to .css, this is what we get as a result:
.some-title, .some-other-title { font-weight: bold; }
.some-other-title { color: red; }
The output you get by this is not very different from what you could have got when you were using the redundant code in CSS. So, most essentially, you should have a clear roadmap for your CSS in mind and only then you can know which components should be placed where and how you can shorten the code and still make it deliver the best result.
3. Not Styling the Blockquote Element
You don’t have to go bonkers while styling your blockquote element, but you can always add a few margins, jazz up the background with different colour and use a non-regular font to add to the visual appeal. Things can further soar if you use an attractive image for the background. Let’s take this as an example of what you can do:
#content blockquote {background:#551717;padding:1px 20px;font-style:italic;}
It represents the text placed inside the blockquote element.
4. Dismantling the Style with a ‘Wrong’ Declaration
When I say ‘wrong’ declaration, I don’t mean it in the context of technically wrong, but more in the context of technically right, but least recommended declaration. For example:
h2{
font-size:3em;
margin-bottom:0.6em;
padding-bottom:0.6em;
border-bottom:2px solid #ccc;
}
.no-border{
padding-bottom:0;
border-bottom:none;
}
What we can instead do is refactoring:
h2{
font-size:3em;
margin-bottom:0.6em;
}
.headline{
padding-bottom:0.6em;
border-bottom:2px solid #ccc;
}
The underlying idea behind this is that when you are rewriting a style, you are only adding to the CSS code and there is hardly any contribution done to the styling aspect. You instead can abstract the designing elements as that way, you are doing a big favour to yourself.
5. Implementing a Responsive Layout Without Setting a Max-Width
Of course, the responsive layout will always reap rich benefits for you. But if you are not setting the appropriate maximum width, you will experience the readability being affected badly when the page is being viewed on larger screens. The length of the line will appear a tad too long.
Here is what you can do instead:
#content {
width: expression(document.body.clientWidth > 1500 ? “1500px” : “95%”);
max-width: 1500px;
}
And that’s a roundup of 5 CSS errors that can really wrestle your website to the ground if not promptly addressed. Do keep them at bay.
Sajan Neupane 
