5 Common Css Mistakes To Avoid

The first two languages we start with in the front-end development path are Html and CSS. Those two languages are the base of any layout structure that you see on the internet.

However, most front-end development beginners have some troubles with Css and that is fine, by practicing you will get the idea and the best practices to do, but I prefer to tell you the best practices so that you can get it fast and right.

Today we will cover 5 Css mistakes to avoid, and we will see what're the best practices for each of those mistakes.

Frequent Using The Position Property

The position is a CSS property that gives us the ability to change the place of any element we want, but using it wrong can destroy our layout.

The first thing you need to know before using the Position property is the Css Flow Layout and how our elements appear inside the page.

Css Flow Layout

The Css Flow Layout is what controls how our elements should appear on the page, you can think of it as the Gravity of your layout that sticks your elements in the page and makes them take their space.

Is there any time that you thought about why when I create some elements they come under each other .... or next to each other? The answer is the Flow.

Every element on our page has its width and height, and another important property is called display.

Display specifies what way should our elements appear. Do we need our element to appear on the Y-axis so we can use “display: block” or on the X-axis so we use “display: inline” instead?

Every element you add starts to take its space based on its width, height and display, and any other property that affects the total element’s size.

Position property changes the position of the element, not the flow, and that depends on which position value you use, position fixed or absolute removes the element flow from the page, while position relative changes the position of the element only while keeping the element’s flow in place.

When you’re using position to change the place of the elements, the flow for those elements stays in place or just disappears, and your layout became like the space, there’s no Gravity.

The Best Practices

Now, after it became clear, let's see what are the best practices we can do to make our layout stable.

You can use the display to destruct your layout as I said earlier display: block; make the flow of the elements come under each other while display: inline; makes them come next to each other. More display values give you the flexibility to destruct your layout like

1display: flex;

1display: grid;

Use Containers

We use containers to contain our elements inside the page, to give the page a consistent space from the sides. But sometimes I see some beginners give each container a different class or style and that may cause in the end non-consistent spaces, and actually, that doesn't look that good to the eyes.

1.container {
2    width: 100%;
3    max-width: 1200px;
4    margin: 0 auto;
5    padding: 0 15px;
6}

The best practice is to use one class for a container and use it for all of your layout containers on the page, so you can get a consistent space on the sides easily and avoid any unpleasing layout look.

Set Default Typography

Let's say you want to create a card with Html and CSS, and started to write your HTML code as the next.

1<div class="card">
2  <img src="https://via.placeholder.com/150" alt="Card Image">
3  <h3>Card Title</h3>
4  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
5  <button>Learn More</button>
6</div>

Now, after creating the HTML code you will start to write your CSS code and set the font styles for this component ..... and here's the problem.

Setting the font styles for each component is not the best practice to do it, because this will make it harder on you to change it later and also because you can do this very easily by setting the main typography styling and giving every heading its style, something like this:

1body {
2    font-family: Arial, sans-serif;
3    font-size: 16px;
4    line-height: 1.5;
5    color: #333;
6    background-color: #fff;
7    margin: 0;
8    padding: 0;
9}
10
11h1 {
12    font-size: 36px;
13    font-weight: bold;
14    line-height: 1.2;
15    margin: 30px 0;
16    color: #333;
17}
18
19h2 {
20    font-size: 28px;
21    font-weight: bold;
22    line-height: 1.2;
23    margin: 20px 0;
24    color: #333;
25}

This small tip will help you and save you time during your coding process :).

Use vars instead of values

Using the same value in too many places in your CSS code can be hard to change later, so that's why we use Vars instead of values but only in the cases where we use a specific value more than one or two times.

By replacing your values with Variables you can easily change them later from one place, instead of going throw all the lines to find this value :).

1:root {
2    --primary-color: #4CAF50;
3}
4
5
6.button {
7    background-color: var(--primary-color);
8    border: none;
9    color: white;
10    padding: 10px 20px;
11    text-align: center;
12    text-decoration: none;
13    display: inline-block;
14    font-size: 16px;
15    margin: 4px 2px;
16    cursor: pointer;
17    border-radius: 5px;
18}

I know this seems a little bit simple but trust me this makes an impact on your code and thinking of refactoring.

Using Frameworks To Get a Basic Style

Sometimes I see people that include some frameworks like Bootstrap and use the whole framework for only the Grid system that this framework provides.

But these mistakes can make your web application slower and that's because you included a big chunk of CSS code into your project files without using it! Also, that will affect your front-end development skills If you don't know how to create what's in the framework and use the framework instead of doing it yourself.

Anytime you use a framework to do a specific task or style, please inspect its code and see how it works, and what you have included in your project. That will help you to reduce the useless code in your projects and improve your front-end development skills :).

Wrapping Up

That's all for today's post. I hope you enjoyed it and got benefit from these tips.
If you want more posts like this! make sure to subscribe to the weekly newsletter, I create a post each Sunday so don't miss them up :).