10 Common CSS Mistakes Developers Often Make

How to avoid these common pitfalls to write cleaner, more efficient CSS code.

By . in Coding. Updated on .

CSS is a powerful tool that brings our websites to life. It’s the magic behind the beautiful, interactive, and responsive designs that captivate users. However, like any tool, it’s not immune to misuse or misunderstanding. Even the most seasoned developers can fall into common CSS pitfalls that can turn a dream website into a nightmare of bugs and inconsistencies.

CSS coding

In this blog post, we’ll shine a light on the ten common CSS mistakes developers make; whether you’re a beginner just dipping your toes into the CSS pool, or an experienced developer looking to brush up on best practices, this post is for you.

By understanding and avoiding these common CSS mistakes, you can write cleaner, more efficient code, ensure your websites look and function as intended across all browsers and devices, and ultimately provide a better user experience.

1. Not Using a Reset CSS

Different browsers have different default styles for elements. For example, the default margin and padding for the <body> element might be different in Chrome and Firefox. This can lead to inconsistencies in how your website looks across different browsers.

Example:

Let’s say you have a simple HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>

And you have some CSS:

body {
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0;
    padding: 0;
}

Even with this CSS, the <h1> might still have some margin in some browsers, because they have a default style for <h1> that includes a margin.

Fix:

To fix this issue, you can use a reset CSS. A reset CSS is a set of styles that you apply at the beginning of your CSS file to reset the default styles of elements. Here’s a simple reset CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

This CSS resets the margin and padding of all elements to 0, and sets their box-sizing to border-box. This can help eliminate inconsistencies between browsers.

However, this is a very simple reset and might not cover all elements and styles. There are more comprehensive reset CSS files available, like the Meyer’s reset, which you can find online and use in your projects.

Using a reset CSS can make your website look very plain, because it removes all default styles. After applying a reset, you’ll need to style all elements yourself. But this gives you complete control over the look of your website.

2. Not Using Shorthand Properties

CSS has shorthand properties that allow you to set multiple related styles at once. If you’re not using them, your CSS can become unnecessarily long and harder to maintain.

Example:

Let’s say you have the following CSS:

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

This CSS applies margin to all four sides of elements with the class “box“. But it’s quite verbose.

Fix:

You can use the shorthand margin property to set all four margins at once:

.box {
    margin: 10px 20px;
}

This does the same thing as the previous CSS. The first value is the top and bottom margin, and the second value is the right and left margin.

Here’s another example with the background property. Instead of this:

.box {
    background-color: #000;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

You can write this:

.box {
    background: #000 url('image.jpg') no-repeat center;
}

Shorthand properties can make your CSS much shorter and easier to read and maintain. They can also help ensure consistency in your styles.

However, be aware that when you use a shorthand property, any unspecified sub-properties are set to their initial values. For example, if you use the background shorthand property and don’t specify a background size, the background size is set to its default value of “auto“.

3. Using Inline Styles

Inline styles are CSS declarations that are applied directly within your HTML elements. While they might seem convenient for quick styling, they can lead to several issues:

Maintenance Difficulty: If you have a large HTML file with many elements using inline styles, it can become very difficult to maintain and update your styles.

Specificity Issues: Inline styles have a very high specificity. This means that they will override any styles declared in your external or internal CSS, making it difficult to override them when needed.

Reusability: Inline styles are not reusable. If you want to apply the same styles to multiple elements, you would have to repeat the inline styles for each element.

Example:

Here’s an example of an inline style:

<h1 style="color: blue; font-size: 2em;">Hello, world!</h1>
Fix:

Instead of using inline styles, it’s better to use external or internal CSS. Here’s how you can do the same thing with internal CSS:

<head>
    <style>
        .blue-heading {
            color: blue;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h1 class="blue-heading">Hello, world!</h1>
</body>

And here’s how you can do it with external CSS. First, create a CSS file (let’s call it “styles.css”):

.blue-heading {
    color: blue;
    font-size: 2em;
}

Then, link it in your HTML file:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="blue-heading">Hello, world!</h1>
</body>

Using external or internal CSS makes your styles easier to maintain and update, allows you to reuse styles, and avoids specificity issues. It’s a best practice to avoid using inline styles whenever possible.

4. Not Using Vendor Prefixes

Vendor prefixes are a way for browser makers to add new CSS features before they become part of the official CSS specifications. Not using them can lead to some CSS properties not being recognized by some browsers, causing inconsistencies in your design.

Example:

Let’s say you want to use the box-shadow property, which is a relatively new addition to CSS:

.box {
    box-shadow: 10px 10px 5px #888888;
}

This CSS will work in most modern browsers, but older versions of some browsers might not recognize the box-shadow property.

Fix:

To ensure that your CSS works in as many browsers as possible, you can use vendor prefixes. Here’s how you can add a box shadow with vendor prefixes:

.box {
    -webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */
    -moz-box-shadow: 10px 10px 5px #888888; /* Firefox */
    box-shadow: 10px 10px 5px #888888; /* non-prefixed, works in most modern browsers */
}

This CSS will apply a box shadow in Safari, Chrome, Firefox, and most other modern browsers.

However, keep in mind that vendor prefixes should be used as a last resort. The use of vendor prefixes can lead to bloated and hard-to-maintain code. It’s better to write standard CSS and let tools like Autoprefixer add the vendor prefixes for you.

Also, note that as CSS evolves and browsers update, the need for vendor prefixes decreases. Many properties that once required vendor prefixes now are universally supported without them. Always check the current browser compatibility for a CSS feature before deciding to use vendor prefixes.

5. Using Too Specific Selectors

In CSS, specificity determines which CSS rule is applied by the browsers. If your selectors are too specific, it can make your CSS hard to override and maintain. It can also lead to unnecessary complexity in your CSS.

Example:

Let’s say you have the following CSS:

body div#container ul.nav li a {
    color: blue;
}

This selector is very specific. It selects an <a> element that is a descendant of an <li> element, which is a descendant of a <ul> with a class of “nav”, which is a descendant of a <div> with an ID of “container”, which is a descendant of the <body>.

Fix:

It’s better to use classes and keep your selectors as simple as possible. Here’s how you can simplify the previous selector:

.nav a {
    color: blue;
}

This selector does the same thing as the previous one, but it’s much simpler. It selects any <a> element that is a descendant of an element with a class of “nav”.

Simplifying your selectors makes your CSS easier to read and maintain. It also reduces the likelihood of specificity conflicts, where more specific selectors override less specific ones.

However, be aware that simplifying your selectors can also increase the likelihood of naming conflicts, where two elements have the same class name but should have different styles. To avoid this, you can use methodologies like BEM (Block, Element, Modifier) to name your classes in a way that reduces the likelihood of conflicts.

6. Not Organizing Your CSS

If your CSS is not organized, it can be hard to find and change styles. This can lead to difficulties in maintaining your code, especially when working with large stylesheets or in a team environment.

Example:

Let’s say you have a CSS file with hundreds of lines of code, and the styles are all mixed up:

h1 {
    color: blue;
}

.footer {
    background: black;
}

h2 {
    color: green;
}

.header {
    background: white;
}

In this example, the styles for different sections of the website are scattered throughout the CSS file. This can make it hard to find the styles for a specific section when you need to update them.

Fix:

A good practice is to organize your CSS in a logical way. Here’s how you can organize the previous CSS:

/* Header */
.header {
    background: white;
}

h1 {
    color: blue;
}

h2 {
    color: green;
}

/* Footer */
.footer {
    background: black;
}

In this example, the styles are grouped by the section of the website they apply to. This makes it easier to find and update the styles for a specific section.

There are many ways to organize your CSS, and the best method depends on the specifics of your project. Some developers prefer to organize their CSS by component, others prefer to organize it by page, and others prefer to organize it by type of style (typography, layout, color, etc.).

In addition to organizing your CSS within each file, it’s also a good idea to organize your CSS files themselves. For large projects, it can be helpful to split your CSS into multiple files (for example, one for typography, one for layout, one for colors, etc.) and then import them all into a main stylesheet using @import statements. This can make your CSS easier to manage and maintain.

7. Not Using CSS Variables

CSS variables, also known as custom properties, allow you to store specific values for reuse throughout your CSS. If you’re not using them, you might find yourself repeating the same values over and over, which can make your CSS harder to maintain and update.

Example:

Let’s say you have a specific shade of blue that you use frequently in your CSS:

.header {
    background-color: #007BFF;
}

.button {
    background-color: #007BFF;
}

.link {
    color: #007BFF;
}

In this example, the same color value is repeated three times. If you decide to change this color, you would have to find and update every instance of it in your CSS.

Fix:

You can use a CSS variable to store this color value:

:root {
    --main-color: #007BFF;
}

.header {
    background-color: var(--main-color);
}

.button {
    background-color: var(--main-color);
}

.link {
    color: var(--main-color);
}

In this example, the color value is stored in a variable called --main-color, and this variable is used wherever the color is needed. If you decide to change this color, you only need to update the variable, and the change will be applied everywhere the variable is used.

CSS variables can make your CSS easier to maintain and update. They can also help ensure consistency in your styles. However, be aware that CSS variables are not supported in some older browsers, so if you need to support this browser, you might need to provide a fallback or use a preprocessor like Sass or Less, which have their own systems for variables.

8. Not Considering Accessibility

Accessibility in web design means making your website usable for all people, regardless of their abilities or disabilities. This includes people with visual, auditory, cognitive, and motor impairments. If you’re not considering accessibility in your CSS, you might be excluding a significant portion of your audience.

Example:

Let’s say you have a website with light gray text on a white background:

body {
    color: #999;
    background-color: #fff;
}

This might look stylish, but it’s hard to read for people with low vision or color vision deficiencies.

Fix:

To make your website more accessible, you can use high contrast colors for your text and background:

body {
    color: #333;
    background-color: #fff;
}

This is much easier to read, even for people with vision impairments.

In addition to color contrast, there are many other aspects of accessibility to consider in your CSS. Here are a few examples:

  • Use relative units like em and rem for font sizes, so users can adjust the text size if needed.
  • Avoid using CSS to hide content that should be accessible to screen readers. For example, use visibility: hidden or opacity: 0 instead of display: none.
  • Use media queries to make your design responsive, so it’s usable on all screen sizes.
  • Use ARIA roles and properties when necessary to provide additional information to assistive technologies.

Remember, accessibility is not just a nice-to-have feature, it’s a requirement for good web design. Making your website accessible can improve its usability for all users, not just those with disabilities.

9. Not Testing on Multiple Browsers

Your website can look and behave differently on different browsers due to differences in how they interpret and render CSS. If you’re not testing your website on all major browsers, you might be unaware of these differences, leading to a poor user experience for some of your visitors.

Example:

Let’s say you’ve used the CSS grid layout in your website design:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

While CSS Grid is supported in all modern browsers, it may not be fully supported or may behave differently in older versions of some browsers.

Fix:

To ensure your website looks and works correctly on all major browsers, you should test it on each one. This includes Chrome, Firefox, Safari, and Edge. There are also tools available that can help you with cross-browser testing, such as BrowserStack and BitBar.

If you find that a certain CSS feature is not supported or behaves differently in a certain browser, you can use feature queries (@supports rule) to provide a fallback:

.container {
    display: flex;
}

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

In this example, the container will use the flex layout by default. If the browser supports CSS Grid (as determined by the @supports rule), it will use the grid layout instead.

The goal of cross-browser testing is not to make your website look exactly the same on all browsers, but to ensure a consistent and usable experience for all users.

10. Not Using Responsive Design

With the variety of devices and screen sizes today, it’s important to make your website responsive. This means that the layout and design of your website should adapt to the screen size of the device it’s being viewed on. If you’re not using responsive design, your website might be hard to use on some devices, particularly mobile devices.

Example:

Let’s say you have a website with a fixed width:

.container {
    width: 1200px;
}

This website will look fine on screens that are 1200px wide or larger, but on smaller screens, it will cause horizontal scrolling, which is generally considered a poor user experience.

Fix:

To make your website responsive, you can use media queries to apply different styles for different screen sizes. Here’s how you can make the previous example responsive:

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

In this example, the container will take up 100% of the screen width on smaller screens, and it will be centered with a maximum width of 1200px on larger screens.

You can also use media queries to apply completely different styles for different screen sizes. For example:

.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
        margin: 0 auto;
    }
}

In this example, the container will be full width on screens smaller than 768px, 750px wide on screens between 768px and 1199px, and 1170px wide on screens that are 1200px or larger.

Using responsive design can make your website more user-friendly and accessible to a wider audience. It’s a crucial aspect of modern web design.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail