DEV Community

10 Common mistakes in CSS

Meghanath on September 09, 2023

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 Short...
Read full post
Collapse
 
darkwiiplayer profile image
𒎏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.

Collapse
 
thomasbnt profile image
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!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ •

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

# heading

## subheading
Enter fullscreen mode Exit fullscreen mode
Collapse
 
aviligonda profile image
Meghanath •

Thanks for your feedback

Collapse
 
voodoocode profile image
ɥɔɐ⅂ ɐɥɔsɐS •

Theres a slight mistake in the 1st one:

.example{
  margin-top:10px;
  margin-bottom:19px;
  margin-left:10px;
  margin-right:19px;
}
Enter fullscreen mode Exit fullscreen mode

is not the same as this:

.example{
  margin:10px 19px;
}
Enter fullscreen mode Exit fullscreen mode

which would be

.example{
  margin-top:10px;
  margin-right:19px;
  margin-bottom:10px;
  margin-left:19px;
}
Enter fullscreen mode Exit fullscreen mode

First value is top/bottom, second left/right

Collapse
 
jarvisscript profile image
Chris Jarvis •

Good tips. Thanks for the reminder.

Collapse
 
st80ene profile image
Etiene Essenoh • • Edited

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.

Collapse
 
dhruvjoshi9 profile image
Dhruv Joshi •

Nice!

Collapse
 
faheemcb profile image
Faheemcb •

Thanks for sharing

Collapse
 
kenneth_sidibe profile image
Kenneth •

Thanks!