7 CSS Mistakes to Avoid as a Beginner

Working with Cascading Style Sheets (CSS) can be hard for beginners. Using CSS, you can structure, update, and maintain the look of your application. But the language requires skills to manipulate HTML pages to get the desired layout.

Here are some mistakes to avoid when working with CSS. They will save you time and ease your development process.

1. Using px for Font Sizes

The "px" unit represents pixels. You can use it to express various lengths on a web page, from the width and height of an element to its font size.

However, px locks your design to a fixed size for all screens. An image in px can take up the full width of one screen, and only a small proportion of another. If you want a more proportional element, use relative measurements such as rem, or percentages (%).

The best relative measurement to use is rem. This unit refers to the font size of the root element which a reader can often set in their browser settings. You can see the impact of px and rem on an element in the following example:

        <!DOCTYPE html>
<HTML>
    <head></head>
    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>

You can style the font sizes in this document using px units with the following CSS:

        h1 {
    font-size: 50px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 15px;
}

The resulting page looks acceptable when you view it on a big screen:

But it does not look presentable on a smaller screen, like on a phone:

Next, apply rem on the same content. Specify a base font-size on the html element, and size other elements using rems, as illustrated below:

        html {
    font-size: 16px;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

p {
    font-size: 1rem;
}

Notice the difference between the large and small screens. With rem, the content scales better regardless of screen size. The elements will never exceed the set screen size. That's why it's better to use relative lengths rather than pixels.

On a desktop screen:

On a small screen, text in rem units is still readable:

2. Putting All Your Styles in One File

Using one CSS file for a big project can create a mess. You will have a file with long lines of code that will be confusing when updating. Try using different files for CSS style sheets for different components.

For example, you can have different files for navigation, header, and footer. And another for sections on the body. Separating your CSS files helps structure your App and encourage code usability.

3. Using Inline CSS Inappropriately

In vanilla CSS you can write styles on the HTML pages just like on CSS frameworks like Bootstrap and TailwindCSS. Inline CSS allows you to apply a unique style to an HTML element. It uses the style attribute of the HTML element.

The following code is an example of inline CSS.

        <h2 style="color:green;">This is a Green Heading</h2>

<p style="color:red;">This is a red paragraph.</p>

The text will appear like so:

However, HTML with inline CSS only can be messy. Since there is no other location for CSS, all the CSS exists in the same file as the HTML. It will look crowded. Editing such a file is difficult, especially if it's not your code.

Also, with inline CSS, you have to write code for each element. This increases repetition and reduces the reuse of code. Always use a combination of external stylesheets and inline CSS to style your web pages.

4. Overusing !important

In CSS, the !important rule adds more importance to a property/value. It overrides other styling rules for that property on that element.

You should only have a few !important rules in your code. Use it only when necessary. There is no point in writing code and then overriding it. Your code will look messy and cause problems when run on some devices.

        <!DOCTYPE html>
<html>
    <head></head>
    <body> 
        <p> I am orange </p>
        <p class="my-class"> I am green </p> 
        <p id="my-id"> I am blue. </p>
    </body>
</html>

CSS:

        #my-id {
    background-color: blue;
}

.my-class {
    background-color: green;
}

p {
    background-color: orange !important;
}

The result is like so:

5. Not Following Naming Conventions

CSS has naming conventions that guide developers on how to write standard code. This is essential if you end up debugging the CSS file at a future date.

One of these standards includes using hyphens to separate grouped words. Another is naming a selector according to what it does. So anyone looking at it will not have to guess. It also makes it easier to read, maintain and share code. For example:

Instead of this:

        .image1 { margin-left: 3%; }

Write it like so:

        .boy-image { margin-left: 3%; }

When looking at the stylesheet, you will know exactly which image the code is for. Google's HTML/CSS style guide lists many more conventions that every developer should know.

6. Leaving Code Uncommented

Writing comments is the most undervalued skill in programming. Many people forget to write comments to explain their code. But it saves time. Comments are essential for reading and maintaining code.

Since CSS is loosely structured and anybody can develop their own conventions, comments are vital. Using well-structured comments to explain your style sheet is good practice. You can write comments explaining sections of the code and what they do.

        /* video elements need space to breathe */
.video {
    margin-top: 2em;
}

/* styling the hero section  */
.salutation {
    margin-top: 1em;
}

7. Failing to Design Beforehand

Many people do it, but it's a grave mistake to start coding without a plan. CSS determines what the structure of your front-end looks like. The design says a lot about your programming skills.

A design for your site clarifies your vision and the resources needed to get you there. Have a mental picture of your project. Then design it on paper or use a design toolkit like Canva to visualize what you want.

When you have a complete picture of the project, assemble all your resources and begin coding. It will save you time and redundancy.

Why You Should Consider These Recommendations

If you are developing applications on the web, you will use CSS. Working well with CSS requires practice and following the standard conventions. Conventions not only make your code readable but also maintainable.

Writing standardized code will save you time and effort. The time you would have spent formatting the front-end you can spend on more complex features. It also ensures you can reuse code and share it with others. Write better code by following the set conventions and become a better developer.