DEV Community

Cover image for 10 Must CSS tricks and tips for beginners

10 Must CSS tricks and tips for beginners

Rahul on December 05, 2020

CSS tricks are something everyone should know for productivity and doing their projects fast. Here I have gathered 10 simple and must-know tricks f...
Read full post
Collapse
 
gsarig profile image
Giorgos Sarigiannidis • • Edited

Use of !important should be discouraged. Instead, if you want to override a previously declared style, you can make the selector more specific. For example, suppose we have this markup:

<div class="container">
   <p class="element">Some text</p>
</div>
Enter fullscreen mode Exit fullscreen mode

To override the styles assigned to .element, it is better to do this:

.container .element {
   color: #000;
}
Enter fullscreen mode Exit fullscreen mode

or

p.element {
   color: #000;
}
Enter fullscreen mode Exit fullscreen mode

instead of that:

.element {
   color: #000 !important;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
alexbricepalo profile image
Alex Brice •

The need for !important is usually a sign of poorly written code.

Collapse
 
rahxuls profile image
Rahul •

That's comfortable to you.

Collapse
 
gsarig profile image
Giorgos Sarigiannidis • • Edited

It's not about comfort or convenience, as use of !important is considered a bad practice and should be avoided. Quoting from MDN:

Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.

It's good for novice developers to know that !important exists, as they might eventually need it at some point, but they should also know that it should be the last resort.

Thread Thread
 
rahxuls profile image
Rahul •

Sure. This is cool and must know.

Collapse
 
olton profile image
Serhii Pimenov •

Resetting box-sizing is helpful

*,
*::before,
*::after {
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rahxuls profile image
Rahul • • Edited

Very helpful

Collapse
 
eddsaura profile image
Jose E Saura •

Hey, take care with indentation!!

Good tips :)

<div class="vcentered">
    <div>&check;</div>
</div>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rahxuls profile image
Rahul •

Oops

Collapse
 
vaishnavs profile image
Vaishnav • • Edited

Hey, Suggestions here
for resetting margin and padding
'* {
margin:0;
padding: 0
}'
(less typing!)

Collapse
 
promikecoder2020 profile image
ProMikeCoder2020 •

Amazing article as always :-) Really appreciate you spreading knowledge. The trick that surprised me most was the internet explorer one.

Collapse
 
rahxuls profile image
Rahul •

Thank You Mike.

Collapse
 
alexbricepalo profile image
Alex Brice •

There are many typos in this post. A quick proofread would bring a bit more credibility to your article.

Collapse
 
rahxuls profile image
Rahul •

I agree with you sir. I blog via phone so it becomes really hard to see. From next time I will surely keep this in mind. I'm sorry.