DEV Community

Stas Melnikov
Stas Melnikov

Posted on • Updated on

My 5 favorite tips to improve your CSS

Hey folks!

CSS is magic for a lot of people. So I'm here to help. I wrote this article with my favorite tips. If you like it you'll read more tips in my newsletter.

border helps users with photosensitivity to find element boundaries

The wrong code. padding 10px, background-color red. The correct code. padding 8px, background-color red, border 1px solid transparent

background doesn't display with operating system contrast settings enabled. As a result, users won't element boundaries. The solution is to use border: 1px solid transparent πŸ’‘

The power of CSS inheritance when defining line-height

The wrong code. line-height 1.5. It's applied to p, ul. The correct code. line-height 1.5. It's applied to body

Folks, I messed up. I forgot I can use CSS inheritance and add line-height to <body> instead of adding it to <p>, <h*>, <ul>, et al. separately πŸ˜‰

Don't forget to stop page scrolling when creating a custom scrollbar

The wrong code. height 100vh, overflow auto. The correct code. height 100vh, overflow auto and overscroll-behavior contain

Do you make the widget with custom scrolling? overscroll-behavior will care about your users by stopping page scrolling after scrolling your widget πŸ’‘

We don't need to use 0 anymore to define margins and paddings

The wrong code. padding 10px 0 15px, margin 0 10px 0 15px. The correct code. padding-block 10px 15px, margin-inline 15px 10px

I had to make a not logical thing, i.e. use 0 to define margins, paddings with opposite sides πŸ˜’ Now margin-block, margin-inline, padding-block, padding-inline help us to make the same without 0 πŸ₯³

It’s time to use a new way for centering elements with position: absolute

The wrong code. The parent has position relative. The child element has position absolute, top 50%, left 50%, transform translate(-50%, -50%). The correct code. The parent has display: grid, place-items: center. The child element has position absolute

Do you still use the old snippet to the center element with position: absolute using transform(-50%, -50%)? It’s time to use a new alternative! Meet place-items: center πŸ˜‰

P.S. Don't forget to see more tips

Top comments (3)

kamaruddheen profile image

Useful tips to use it. Thanks @melnik909

arii0 profile image

Very Nice

francescovetere profile image
Francesco Vetere

These are great tips! πŸ˜‰