10 Common mistakes in CSS

Here are some common mistakes that most web developers make, and how identifying and avoiding them can help you write better and more.

1.Use Shorthand : CSS shorthand is a group of CSS properties that allow values of multiple properties to be set simultaneously. These values are separated by spaces. For example, the border property is shorthand for the margin-top, margin-right, margin-left and margin-bottom properties.
//Not Using Shorthand
.example{
margin-top:10px;
margin-bottom:19px;
margin-left:10px;
margin-right:19px;
}
//Better way
.example{
margin:10px 19px;
}
2.Responsive design : If your website become responsive, avoid use the px instead use the percentage. Below example container class 1000px is not correct why because, screen device vary from different screen so that time it will take fixed 1000px only. better to use 100%.

//Not correct way
.container{
width:1000px;
}
//correct way for responsive
.container{
width:100%;
}
3.Repeating the Same Code : If you want properties to other class don’t write like new code. use classes with separated by comma(,).

One more point is ,if required extra property to element use the other class and for that class write css. it will reduce duplicate code.

//Not correct
.box1{
width:50%;
margin:20px;
}
.box2{
width:50%;
margin:20px;
}
//Correct
.box1,.box2{
width:50%;
margin:20px;
}
4.No font fallback : What is font fallback font?

A fallback font is a font face that is used when the primary font face is not loaded yet, or is missing glyphs necessary to render page content. For example, the CSS below indicates that the Helvetica font family should be used as the font fallback for “Arial”

//Not good
body{
font-family:Helvetica;
}
//Good
body{
font-family:Helvetica, Arial,Sans-serif;
}
Some browser may not support some CSS font families, so we can use like fallback, it will support next font families instead of default one.

5.Using Color Names :

Better way use hex color codes instead of Color names

//Not good
.example{
color:green;
}
//Good
.example{
color:#00ff00;
}
6.Complicating Selectors :

When you can use direct class for a particular element, you should not complicate by nesting with different selectors.

//It is good some times, but better to don't go eith complicate
header .navigation ul.nav-links{
list-style-type:none;
}
you can just use class for simplicity & It will be also easy to read & Understand

//Better
.nav-links{
list-style-type:none;
}
7.Z-Index mistakes :

Many developers use a really high z-index value to put an element in front.

And it becomes difficult when you want to put another element in front of others. the Z-Index value starts increasing much higher.

.modal-container{
z-index:545;
}
.modal{
z-index:5345345;
}
The solution to use moderate values, so that it doesn’t become difficult for long run.

.modal-container{
z-index:1;
}
.modal{
z-index:2;
}
8. Inconsistency names : My opinion is based preparing web pages content, CSS class or id names should be like that only it’s better.

Why I am telling means , If we use like other developers understand immediately, no need search for that.

.header{
font-size:2rem;
}
9.When to use class and Id :

When we access value from element better to use “id”, when prepare designs we classes, id’s are unique, classes we can use multiple times.

i)Id : id is unique so access data easy, of use class we need add index to that element like [0].

let name = document.getElementById('name').value;
console.log(name);
ii) classes : classes can re-use, so better follow this way.

Paragrah

.classData{
margin:20px
}
10. Ignoring Cross-Browser Compatibility: Different browsers may interpret CSS rules differently, leading to inconsistent visual appearance across platforms. Test your CSS code on multiple browsers and consider using CSS prefixes or vendor-specific prefixes for compatibility with older browser versions.

Before write new CSS properties in code check, which browser support which CSS properties by using the https://caniuse.com/

Conclusion :
In conclusion, avoiding common mistakes in CSS (Cascading Style Sheets) is crucial for creating well-designed and efficient web pages. CSS plays a significant role in controlling the visual presentation and layout of web content. By steering clear of these mistakes, you can ensure your CSS code is clean, maintainable, and compatible across different browsers and devices.

Thanks a lot! For the reading the article, Please support by follow me.

Comments

[𒎏Wii 🏳️‍⚧️]

Not a massive fan of hex codes for all CSS.

They're an easy way to get a desired colour when prototyping once you understand how they work and have a degree of intuition, but if you want orange, then actually writing that makes the CSS a lot easier to read for anyone who can't read hex codes, and it's easier to search as well.

When named colours aren't enough, there's a very thin margin where hex codes have their place in development, but you very soon cross into "just use LCH" territory. Using RGB Hex for any sort of bigger project these days is almost never a good idea.

[Thomas Bnt]

Hello ! Cool post about mistakes, always a pleasure to know some tips at beginner dev.

Also don't hesitate to put codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');

[𒎏Wii 🏳️‍⚧️]

Using markdown headings and subheadings for the different tips would also make things more readable imho

# heading

## subheading

[Meghanath]

Thanks for your feedback

[ɥɔɐ⅂ ɐɥɔsɐS]

Theres a slight mistake in the 1st one:

.example{
  margin-top:10px;
  margin-bottom:19px;
  margin-left:10px;
  margin-right:19px;
}

is not the same as this:

.example{
  margin:10px 19px;
}

which would be

.example{
  margin-top:10px;
  margin-right:19px;
  margin-bottom:10px;
  margin-left:19px;
}

First value is top/bottom, second left/right

[Chris Jarvis]

Good tips. Thanks for the reminder.

[Etiene Essenoh]

Nice article. Please you made a mistake by saying border is the shorthand for margin-right, margin-left and so on. It should be margin and not border.

Also, you should use code blocks for your code snippets.

Thanks.

Great insight no doubt.

[Dhruv Joshi]

Nice!

[Faheemcb]

Thanks for sharing

[Kenneth]

Thanks!