Home » IT & Tech Blogs » Information Technology » Programming/Development » 10 Most Common CSS Mistakes by Web Developers

10 Most Common CSS Mistakes by Web Developers

In the Web development world, CSS is said to be the simplest web language that elucidates the procedure of creating attractive and engaging sites. With the use of CSS, you can control the color of the text, change the font size, and manage the space between paragraphs and many more things with simple coding.

But still, many of the web developers find CSS one of the perplexing systems. In fact, it becomes even more difficult when you are doing it in a high-scale level. The major disadvantage is that browsers have different levels of compliance with style sheets. Therefore, it has been seen that most of the web developers make mistakes

In this post, we will explore the 10 most common CSS mistakes enacted by the web developers.

1. Don’t use an appropriate CSS Reset

The most daunting thing that can make the developers to lose their patience is the inconsistency of web browsers. But still, they are the ultimate platforms that display your website. So, it is necessary for you to find out the ways to please the assorted web browsers.

However, web browsers do the most absurd thing by providing default styling for HTML elements. In fact, there should be a fallback mechanism for those who choose not to use CSS.

It is quite difficult to find a case of two browsers that can provide the same default styling, so the most suitable way to confirm your styles are notable is to use a CSS reset.

Usually, a CSS reset involves setting or resetting all the styles of HTML elements to an expected baseline value. The best part of this is that when you include a CSS reset properly, then you can style all the elements on your web page.

There are various CSS reset codebases that you can include on your website. Or you can also create your own reset if you find it convenient and suitable.

However, many of us try to use a simple universal selector margin/padding resent:
* { margin:0; padding:0; }
It is not a proper reset, but it still works. Apart from these, you also need to reset, for instance, underlines, borders, and color of elements, links and tables so that you don’t run into inconsistencies between web browsers.

2. Over-Qualified Selectors

It is not a good practice of being overly specific while selecting elements to style. In fact, the following example is great selector:
ul#navigation li a { ... }
It is better for you to write .nav{} than ul.nav{}. With the former syntax, you can use .nav on anything like a ul or an ol. On the other hand, it also keeps your specificity balanced.

However, there is no specific reason for the <ul> before # navigation because an ID is already the most precise selector. Actually you don’t need to put <li> in the selector syntax as all the <a> elements within the navigation are inside list items. Therefore, there is no reason for specificity.

In other words, it is better for you to avoid such practice while writing code or property for selectors because they cannot be utilized on other elements.

3. We Don’t Consider Frameworks

If you are creating a CSS layout from scratch, then it is imperative for you to know the reason why you want to develop this. There are many CSS frameworks available that includes 960 CSS Framework and Blueprint framework. Usually, these are developed with an objective to make your layouts awesome, without need to begin anything from scratch

4. Web Developers Use 0px instead of 0

Most often, when you want to sum a 20px margin to the bottom of an element, then you do like this:
#selector { margin: 20px 0px 20px 0px; }
But, this is not right. You don’t need to add the px after 0. When you work with a heavy file, then removing all those superfluous px can minimize the size of your file that is never a bad thing.

5. Excessive Selectors

The procedures for writing styles is to begin with all the typography, then work on the structure and certainly on styling all the backgrounds and colors. Many of the developers don’t focus on an element at a specific time. They usually write down an excessive style declaration. Thus, it becomes necessary to check again and again in order to avoid excessive selectors.

6. Uses too many files

It is impossible to add a design with 12 assorted CSS files of a website because it can slow down the time processing each file. This is because the browser makes solidification for every single file. Hence, it would be better to use a simple CSS that can utilize 1 or 2 files only.

7. Repetitious Properties

Many of the developers apply the ditto properties to the assorted selectors. It can be the styling of an h5 in the header to gaze exactly like the h6 in the footer. By making the pre ‘s and blockquote are the same size.

While cross checking it, you should enquire that you haven’t repeated multiple properties. In case, you see two selectors performing the same task like:

font-style: italic;

color: #e7e7e7;

margin: 5px;

padding: 20px


.selector-2 {

font-style: italic;

color: #e7e7e7;

margin: 5px;

padding: 20px


Then it will be better to merge both selectors by using comma:

#selector-1, .selector-2 {

font-style: italic;

color: #e7e7e7;

margin: 5px;

padding: 20px


8. Uses CSS for Everything

One of the major problems of all human beings that they quickly influenced by the latest technology. They become excited and use it in everything, even if it can go against the nature of work.  Being a web developer, we sometimes want the latest technology to do something innovative and advanced, when we know we can achieve the same goal with the different technology quickly and easily.

For instance, in many situations, it is pretty simpler to use a table to manage the data rather than making a difficult CSS-based layout. But still, we use CSS. The usage and implementation of the correct element on the correct position should be practiced unless we need some other element specifically.

9. Irrelevant Whitespace

If you want to reduce your CSS files for smooth performance, then each and every space counts. When you are developing a site, then it is necessary to format the code as per your convenience.

Many of the web developers merely don’t curtail their files before sending off their website. It is one of the crucial mistakes that need to be rectified.

10. Not Managing the CSS in a Consistent Way

It is imperative for you to manage your codes while you are writing a CSS. With the help of comments, you can assure that the next time when you arrive to bring a change into a file you will be able to navigate it quite easily.

As many of developers find themselves into an awful situation when they try to change the styling but unable to find the style declaration. Thus, it is necessary to organize your CSS if you want to avoid any mistake.

Reference: Lucy Barret is an experienced WordPress Developer working for WPGeeks Ltd. She has a great track record of delivering 100% client satisfaction for HTML to WordPress conversion projects. She enjoys writing tutorials and passionate for sea foods.

Originally posted 2015-06-24 18:48:07. Republished by Blog Post Promoter

Check Also

Why Should Businesses Care About These Reliable Webdesign Trends?

In this era of digital technology, it is important to have an online presence, especially …

Information Technology Blog

Accessibility Tools