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. ⬇️
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 🙂
Follow us on Instagram. 💞