Most Common CSS Mistakes that Web Developers Make

Last Updated : 30 May, 2023

Cascading Style Sheets (CSS) is a style sheet language used to apply styles on HTML tags. Most people think that CSS is easy to learn but the fact is that CSS is really straightforward to learn but it is difficult to master. It requires a lot of practice to master CSS. There are some common mistakes that every web developer makes while using CSS. It is not a big deal to make mistakes but small mistakes may become a headache for you when you are working on a large-scale project. So, you should know your mistakes and you should learn from them. In this article, we will know about the 5 most common CSS mistakes that web developers make.

1. Not using consistent naming: It is a good practice to use a single naming convention in your project because if you are working in a team then it is important to maintain consistency otherwise everything will get messed up. We should also use meaningful names for class and id so that it becomes easy for us to debug our code and it also makes our code more readable.

Example: In this example, we are using the above-explained method.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .spiderMan {
            color: red;
        }
 
        .black-widow {
            font-size: 3rem;
        }
    </style>
</head>
 
<body>
    <h2 class="spiderMan">
        Welcome To GFG
    </h2>
 
    <p class="black-widow">
        Top 5 CSS mistakes that
        web developer makes
    </p>
</body>
</html>

In the above example, class names that are being used are “spiderMan” and “black-widow”. This practice makes our code difficult to read and it also looks unprofessional if we are using inappropriate class and id names. Here, two naming conventions are being used (i.e. camel case and kebab case). It makes our code look inconsistent and ugly. So it is a good practice to use a single naming convention for your project and use the appropriate class and id name.

We can use a single naming convention (in this case we are using camelCase) and appropriate names in the following way:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        .exampleHeading {
            color: red;
        }
 
        .exampleContent {
            font-size: 3rem;
        }
    </style>
</head>
 
<body>
    <h2 class="exampleHeading">
        Welcome To GFG
    </h2>
     
    <p class="exampleContent">
        Top 5 CSS mistakes that 
        web developer makes
    </p>
</body>
 
</html>

Above code looks much better and consistent than the previous one. This practice also saves your time because now, you don’t have to think about fancy variable names like “spiderman” and “blackwidow”.

2. Using inline CSS: Inline CSS is a method to link CSS to HTML. We can use this method to link CSS, there is nothing wrong with it but we should know when we should link CSS using inline and when we should not. As a programmer, we should always follow DRY (Don’t Repeat Yourself) principle. Inline CSS prevents the possibility to reuse our code because in it CSS properties are specific to one element only, so it is a better practice to use CSS classes because they are meant for reuse.

Example: In this example, we are using inline CSS property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>INLINE EXAMPLE</title>
</head>
 
<body>
    <h2 style="color:blue;font-size:3rem;">RAY</h2>
    <h2 style="color:blue;font-size:3rem;">SHYAM</h2>
    <h2 style="color:blue;font-size:3rem;">RIDHIMA</h2>
    <h2 style="color:blue;font-size:3rem;">MAYANK</h2>
    <h2 style="color:blue;font-size:3rem;">ARJUN</h2>
</body>
</html>

In the above example, we have five h2 elements and all of them have the same style properties and we are using inline CSS here which violates the DRY principle. So instead of inline CSS, we can define a class that will make save you time and will save you from the mess that inline CSS may create.

We can rewrite the above code in a better way in the following manner:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>INLINE EXAMPLE</title>
     
    <style>
        .example {
            color: blue;
            font-size: 3rem;
        }
    </style>
</head>
 
<body>
    <h2 class="example">RAY</h2>
    <h2 class="example">SHYAM</h2>
    <h2 class="example">RIDHIMA</h2>
    <h2 class="example">MAYANK</h2>
    <h2 class="example">ARJUN</h2>
</body>
</html>

It is recommended to use internal or external CSS instead of inline CSS because it may cause a huge mess in your code and it is also difficult to update inline CSS.

3. Using absolute units instead of relative units: It is fine to use absolute units in certain cases but if you are only using absolute units then it’s a huge mistake. In today’s world, we want our websites to be responsive so that we can use them on different devices, so it is necessary for elements to get scale relative to window size. Absolute units don’t scale when the window size changes so they are less favorable for our responsive websites. So it is highly recommended to use relative units instead of absolute units. Some of the relative’s units are vh, %, em, rem, etc.

Example:

h1 {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 8px;
}

In the above code, absolute units are being used which are less favorable for our responsive websites, so instead of absolute units we can use relative units in the following manner:-

h1 {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: 0.5em;
}

4. Not putting comments in code: As a developer, we have heard many times that it is a good practice to put comments in your code. Comments can save you from hours of debugging. If you are working in a team or if you are working on some large scale, it is necessary to put comments in your code so that it becomes easy for your teammates to understand your CSS quickly and it will also become easy for you to debug. Commenting on your CSS code is necessary because even a single HTML page can have lots of CSS linked with it so it is highly recommended to use comments. Note that you should not use long and inappropriate comments, comments should be short and appropriate.

5. Using only a single style sheet: It’s ok to use a single style sheet if you are working on some small project. But if you are working on some big-scale project, then it is highly recommended to split style sheets into different ones because it will become easy to maintain and will provide better modularity. We can have different CSS files for different fixes.

Example: