The 7 CSS Mistakes Web Developers Should Avoid

Cascading Style Sheet (CSS) is one of the foundations of the web page. It gives a sense of design and style to the HTML page. There are some common mistakes that web developers should avoid while writing CSS:

1- Use Color Names Instead of Hexadecimal

Most developers write like the color: orange; in this format, you are telling the browser to use any shade of orange, and by giving a color name instead of hexadecimal you are also giving the browser control over the color, and as a developer, you should never do this. You should always write the hexadecimal value of color like color: #F26C4F in this format, all browsers will show exactly the same shade which you want to show on your webpage.

Note: You can always find hexadecimal values by inspecting on browser and you can also add browser extensions like “ColorZilla for Google Chrome”.

2- Use PX instead of Relative Units

Sometimes it is necessary to use absolute PX values, but whenever it is possible to use measurement values try to use em(%) and rem (root-em). It helps you to ensure that your website scaling is according to the user choice of zoom level and device size.

So if you have CSS like:

p {
   font-size: 18px;
   line-height: 24px;
   margin-top: 30px;
}

You can write:

html{
    font-size: 18px;
}
p {
    font-size: 1rem;
    line-height: 1.334em;
    margin-top: 1.667rem;
}

3- Ignore Fall-back fonts

Not all browsers support all fonts, you must think about this if the browser doesn’t support the font which you are using then which font it should display. So instead of writing font-family: Helvetica; you can write font-family: Helvetica, Arial, sans-serif; If the browser will not support Helvetica it will fall back to Arial.

4- Don’t use CSS Shorthands

Using shorthand CSS means, instead of writing:

font-family: Helvetica;
font-size: 14px;
font-weight: bold;
line-height: 1.5;

You can write:

font: bold 14px/1.5 Helvetica;

But why we are doing this? Because it will help you to reduce your file size, now you can see your four lines of code are now only 1 line. It will also help you to write organized CSS.

5- Use IDs instead of Classes

As we know the ID of elements is unique and it can be applied on only one HTML element through the webpage and classes can be applied on more than 1 element, this is one of the main reasons you should use classes because CSS will become reusable. To maintain consistency of style use only classes in CSS and ID in JS to call specific elements.

6- Repeat CSS

Repetition of code is not a good practice. Look at this code:

p {
   font-size: 1rem;
   line-height: 1.334em;
   margin-top: 1.667rem;
}
h6 {
   font-size: 1rem;
   line-height: 1.334em;
   margin-top: 1.667rem;
}

You can write this like:

p, h6 {
   font-size: 1rem;
   line-height: 1.334em;
   margin-top: 1.667rem;
}

It reduces the line of code and improves page load speed. So make sure that your CSS is not repeated.

7- Unorganized CSS

It’s a good practice to do your code neat and well-organized. CSS also needs to be well organized.

How you can write well-organized CSS? Here are some tips that may help:

1. Write comments on your CSS
2. Create logical sections like set up rules for the body, paragraphs, headings, lists, tables, and links that can be put into general styles or library maybe. After this, you can put all the form fields including inputs and buttons. And then you can start organizing pages.
3. Avoid overly inherited selectors.
4. Define Variables.

Compiling component stylesheets like SCSS.