7 Mistakes To Avoid In CSS

CSS is a rather straight-forward language. This article will teach you the mistakes to avoid in CSS. You should not ignore SEO Structure while developing the website. Let’s see 7 mistakes to avoid in CSS. ⬇️

Table of Contents

Too much specificity

A lot of specificity can be difficult to read and retain. The problem in the Design code will be a hassle to fix. Instead, in your CSS code, utilize the HTML ID attribute or the BEM naming conversion.

section#container footer.page-footer > ul a {
  color: #fff;
  font-size: 20px;
}

Using BEM or a similar method can help save debugging time. & You don’t have to rely upon the parent elements for styling. Read more about BEM.

Overuse !important keyword

Use the !important keyword sparingly. Consider modifying your CSS code to use a CSS selector that is less specific. You’ll avoid having to utilize the !important keyword this way.

div {
  padding: 20px !important;
  background: #EACF90 !important;
  margin: 8px 0;
}

Use inline CSS

Inline CSS should not be used. You can reuse the class if you use a CSS stylesheet.

<div style="background: #abcdef;">Hello World</div>

Use insanely high Z-index

Don’t use insanely high Z-index property for elements. The other day I saw a element had 1564 as the z-index property. Too overcome too this I had to set even higher z-index which could be bad.

div {
  z-index: 1564;
}

Make wise & moderate use of z-index, increasing only the necessary amount to achieve the result.

Read our other blogs too

Name elements randomly

Don’t give each element a random name. Crawler and the developer should be able to understand the name of the element. Make use of the semantic HTML structure.

#sdadasdasd {
  color: #fff;
  background: #333;
}

Not properly resetting the CSS

Web browser characteristics aren’t always consistent, and this can cause a lot of worry for developers.

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

Not using Fallback font

If you’re utilizing a 3rd party font. The browser must wait for the typeface to load before rendering. By employing a fallback font. The browser is aware of the typeface to be used.

You can use a preinstalled font as a fallback.

p { font: 'Oswald', Arial }

here ‘Arial’ is used a fallback until the ‘Oswald’ font is loaded.

These were few mistakes to avoid in CSS. Thank you for scrolling till bottom 🙂