DEV Community

Cover image for 10 CSS Code Snippets Every UI Developer Should Know

10 CSS Code Snippets Every UI Developer Should Know

Niraj Narkhede on October 22, 2024

Introduction: Supercharge Your Stylesheets with These Handy CSS Tricks Hey there, fellow UI developers! Are you ready to add some pizzaz...
Read full post
Collapse
 
viissgg profile image
Vijay •

A Really useful list of the snippets. Thanks for sharing.

Nowadays, centring is much easier with a flexbox and grid.

With Flexbox

.container {
  display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh; /* Full height of viewport */
}
Enter fullscreen mode Exit fullscreen mode

With Grid

.container {
  display: grid;
   place-items: center;
    height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tdjdev profile image
Davy TISSOT •

For "The Magical Centering Trick" I use:

.center-me {
  position: absolute;
  inset: 25%;
}
Enter fullscreen mode Exit fullscreen mode

or

.center-me {
  position: absolute;
  top: 25%;
  right: 25%;
  bottom: 25%;
  left: 25%;
}
Enter fullscreen mode Exit fullscreen mode

I avoid using transform in this case for performance reasons. And when inset is supported, this is more concise.

PS: Don't forget to add position:relative to its wrapper if you don't want it to stick to the viewport.

Collapse
 
pengeszikra profile image
Peter Vivo •
  1. trick good to remember parent need to be: position: relative
Collapse
 
leob profile image
leob • • Edited

Yeah I like it, a couple of good tricks ...

Funny though that you're calling this "quick and dirty":

5. The Flexbox Centering Shortcut

but apparently this is "clean and elegant"?

1. The Magical Centering Trick

I would call it just the other way around ;-)

Hey just joking, I love this article!

Collapse
 
tewdnl profile image
TewDnl •

Nice article and some great tips here.

To go along with #1 I have found that using margin helps with some pesky centering issues as well:

.center-this {
margin: 0px auto;
}

along with the parent position setting that Peter Vivo mentioned in his comment.

Collapse
 
ashutosh_dev profile image
Ashutosh_dev •

Nice.
But one thing, you can't change scroll speed, only scroll "behavior" is customizable.

Collapse
 
smitterhane profile image
Smitter •

Good css tips shared

Collapse
 
shubhanshi_saw_2ba92e3ea2 profile image
Shubhanshi Saw •

Thank you for sharing useful tricks 🤩

Collapse
 
syno profile image
Francis •

Wow!, I really appreciate the way you broke down the concepts, making them easy to understand. This will definitely be helpful for both beginners and experienced developers. Looking forward to more insightful posts from you.

Collapse
 
mince profile image
Mince •

Awesome, I too write similar articles

Collapse
 
frickingruvin profile image
Doug Wilson •

Handy! Thanks for sharing!

Collapse
 
jangelodev profile image
João Angelo •

Hi Niraj Narkhede,
Thanks for sharing.

Collapse
 
atlemagnussen profile image
Atle Magnussen •
  1. Is an old hack from when we didn't have flex box or grid. Not recommended
Collapse
 
nathantaal profile image
Nathan •

I would opt for flex with the example you gave, and therefore most snippets are obsolete. Nice part about it, might be understanding of legacy systems.

Collapse
 
philip_zhang_854092d88473 profile image
Philip •

Using EchoAPI to test APIs that drive my CSS animations has made it easier to ensure everything works as expected.