DEV Community

5 CSS tips you didn't know you needed

Lynne Finnigan on November 28, 2018

Having worked in web development agencies over the years, I've picked up some tips and tricks along the way. There are some things that I use day t...

Read full post

Nathanael Demacon • Nov 29 '18 • Edited

The most useful trick I use in every project is:

* {
  box-sizing: border-box;
}

Which prevent breaking box dimensions with margin, padding or borders.

JavaMajk • Nov 30 '18 • Edited

Yup, ..to be extra safe :D


  html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

Jonny Goodwin 🚀 • Dec 4 '18 • Edited

I think that using box-sizing: inherit;’ can be bad. If you do this, and decide to change box-sizing on an element, all of that elements children will also have their box-sizing changed.

Unless you are sure you want that to happen, it’s probably best just to use ‘box-sizing: border-box;’ to ensure that all elements use ‘border-box’. If any elements need a different box-sizing, you would override it with more specificity.

JavaMajk • Dec 6 '18

Yeah indeed, things can get messy in this case.

Daniel Tonon • Dec 27 '18

I was a box-sizing: inherit; person, then I realised this is super useful:

.page-restrictor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: content-box;
}

It means that when the screen is less than 1240px wide, it will have a 20px gap down either side of the screen with no need for media queries.

This technique doesn't work with box-sizing: inherit; though.

Giacomo Sorbi • Dec 4 '18 • Edited

Mh, the * selector is relatively very expensive: I would use it rather sparingly.

Mattia Astorino • Feb 1 '19

No. The * is the less expensive. Check some talk about performances by csswizardry

Giacomo Sorbi • Feb 1 '19

Googling quickly, they still seem to confirm it among the less efficient: csswizardry.com/2011/09/writing-ef...

Mattia Astorino • Feb 1 '19 • Edited

8 years old post...

Giacomo Sorbi • Feb 1 '19

This one is much more resent and confirms that * is still more expensive: sitepoint.com/optimizing-css-id-se...

Nathanael Demacon • Nov 30 '18

It seems like the same thing? :(

Mattia Astorino • Dec 1 '18 • Edited

No. The second snippet allows you to define a global box-sizing but let elements to inherit or change the behaviour

Nathanael Demacon • Dec 1 '18

Oh ok! So your way is better for sure!

Rinat Valiullov • Feb 1 '19

It's old trick, man

box-sizing

Sdu • Nov 29 '18

This should be default

Akshay Kadam (A2K) • Dec 1 '18

Thank you, Lynne, for that wonderful multi-line effect.

I saw it somewhere but forgot about it. Soon I'll use it on my next project.

I've made some Pens for practicing these & to simply copy-paste next time I use it. Of course, I've given credits to you on top of each CSS file. Here are the links -

1) Transitions - Button & Link

2) Background Overlay

3) Multi Line Underline Effect

4) Sticky Elements

5) Prevent Highlighting

Lynne Finnigan • Dec 4 '18

Great, thanks!

Shahidul Islam Majumder • Nov 29 '18

Multi line hover effect is really cool. Thanks for sharing the tricks.

Lynne Finnigan • Nov 29 '18

No problem, I really like the effect too! Hopefully some of them come in handy :)

Alex Lohr • Nov 29 '18

A CSS trick with an effect on JS: pointer-events: none will remove an element from the DOM event tree even if it is in the foreground, which means that if you capture click events, you'll receive the parent. If you are using event.target, you'll save yourself some steps of filtering.

Interesting fact I found out: if you add text nodes via appendChild, some browsers will handle them as own elements inside the DOM event tree.

Mattia Astorino • Dec 1 '18

you need always to double check with js because removing pointer-events: none the element will be targettable even if it is eg. disabled.

leob • Dec 4 '18

Never ceases to amaze me how much "stuff" there is in CSS, it's endless. Implementing a CSS processing/browser rendering engine must be one of the most dauntingly complex pieces of engineering you can imagine.

Lynne Finnigan • Dec 4 '18

I know, right?!

leob • Dec 4 '18 • Edited

I saw a statement recently that "CSS is the most complex programming language that exists" ... I don't know if it can really be considered a programming language (in the Turing sense), but it is really insanely complex, especially because of its long history and never ending evolution, which means that there are always at least half a dozen different ways to do something.

Anyway, some really great tips and techniques here, thanks for the article! "sticky" is especially a cool one, and the transition tip is simple but very useful.

Jeremy • Nov 29 '18

Have been using CSS for a long time now and I had never come across sticky or user select none before!

Thanks for that ☺

Lynne Finnigan • Nov 29 '18

You're welcome :)

I think for a while position sticky didn't have much browser support, but now it does other than IE11. At least because it's css, it doesn't break anything in IE11, it simply just doesn't stick!

Allan N Jeremy • Dec 2 '18

The pseudo-selector background overlay is neat! Knew about pseudo-elements but never occurred to me to use them for the background overlay. Always added that extra inner div. Time to refactor!

The underline one was pretty cool too. Heck, they were all interesting in their own way.

Thanks for sharing Lynne

Lynne Finnigan • Dec 2 '18

I'm glad it helped! These are things I've discovered along the way, thought it would be good to share :)

Jake Wesorick • Nov 29 '18

Pretty sure you're not supposed to prevent highlighting as thats there for people with disabilities.

Lynne Finnigan • Nov 29 '18 • Edited

When I had to use this it was to prevent the highlighting when you clicked multiple times on a carousel arrow really fast. I wouldn’t apply it to text or anything like that - I would have no reason to.

I can’t find much info on this specific property and accessibility issues, where did you find that information?

Jake Wesorick • Nov 30 '18

I am wrong. I was thinking of this: a11yproject.com/posts/never-remove.... As long as it still has an outline when it's focused you're safe.

Lynne Finnigan • Nov 30 '18

It was worth checking again, considering how screenreaders work! Thanks for sharing the issue with removing the outline on focus 🙂

APixel Visuals • Dec 4 '18

Can also be used to prevent selection of images by accident.

Thoby V ijishakin • Nov 29 '18

Wow awesome tips. Thanks for sharing.

Lynne Finnigan • Nov 29 '18

No problem! Hope they come in handy :)

Jan-Philipp • Nov 29 '18

Thanks for the tipps!

Just starting out on Web Dev. I will copy your blending for the links this evening on my project :)

Lynne Finnigan • Nov 29 '18

Awesome! Let me know what you think :)

Azkar Moulana • Jun 3 '19 • Edited

position: sticky is your friend.

Not supported by all the legacy browsers. Even chrome gives the partial support. But a very handy style rule, browser supports will be granted in near future.

Robin Kretzschmar • Nov 29 '18

user-select was new to me, thanks for sharing this! :)

Lynne Finnigan • Nov 29 '18 • Edited

No problem, it was a strange one at the time, took a while to find a solution!

astodev • Nov 29 '18

Here is a nice CSS tip (or CSS idea) for mobile design that a co-worker showed me today:

On mobile make your buttons wide so they're easy to click.

Shubham Battoo • Dec 1 '18

Really cool tricks.

Lynne Finnigan • Dec 2 '18

Thanks! :)

Gulshan • May 3 '19

that's some really cool trickrey 😃 well, for background overlay example, I use blend-mode which is really easy. And for the text underline I've been using box-shadow but that hover effect is really cool! I'll try that one.