4 CSS tricks I’ve learnt the hard way

Photo by Joanna Kosinska on Unsplash

Update 6–13–2018 : A reader has translated this article in japanese, find it here. 10k readers and 650+ claps later : Thank you readers ❤

Starting a new project from scratch is always a good way to learn new things no matter how experienced you are.

Recently I wondered what it would take to build a full web-application without using any third-party well-known framework such as Bootstrap.

First would it unleash the power of coding freedom (aka “Errors can only come from you” but also “Stop fighting against your framework with !important rules”) but also would it teach me CSS tricks I’m now proud and happy to share with you.

1. No borders – Prefer box-shadow or box-sizing

Have you ever worked with borders or not, this is what you should consider :

Borders actually take space in the global layout of your page. It means that it adds extra width and height to bordered elements.

Consequences:

  • You have to manually compute desired width and height of your elements to keep them from scrambling your layout in case of a list-like or grid-like approach.
  • Adding borders on particular states like hover will make the whole layout move. Performance-killer.

Demonstration:

By hovering the first div you should notice the second one is also moving.

Workarounds:

  • You can use : box-sizing: border-box so that width takes border-width into calculations.
  • You can use: box-shadow: /* ... */ to fake borders.

Demonstration:

2. Draw attention to an element

Whenever you want users to click on a particular button there are multiple well-known strategies to call attention.

However, I’d like to share with you a smooth and simple yet customizable trick.

Demonstration:

Advantages :

  • No change in width or height of the element thus no broken layout.
  • One-liner : animation: radial-pulse 1s infinite;
  • You can change : color, size, duration, etc.
  • Unobtrusive yet noticeable.

3. Center an element horizontally and vertically

CSS has evolved still have we been a lot struggling to center our elements both horizontally and vertically.

There might be plenty of ways to achieve that but these are my everyday solutions to this recurrent need:

  • Either use :display:flex on the parent element + margin: auto on the child element, +text-align:center depending on your case.
  • Either use : display:flex + justify-content:center + align-items:center on the parent element.

Demonstration:

4. Position an element relatively to its parent

This one is very useful when dealing with dropdowns, tooltips and popovers.

This is how it works:

  • The parent element MUST NOT be static : position:relative | fixed | absolute
  • The child MUST have : position:absolute

And just like that, using top | left | bottom | right will position the child relatively to its parent.

Demonstration:

Notice that the square on top right could have been a popover settings menu appearing on click or hover.

Example picked from my own work :

When the three dots are clicked the menu is toggled

Thanks for reading

I hope this article has been valuable to you.

This article has been written following a discussion with a reader thus I can only encourage you to reach out david.mellul@outlook.fr 😄 ☕.

“Cappuccino in a white mug with white foam art on a wooden table” by wu yi on Unsplash
David

Fullstack Developer, Trainer & Entrepreneur.

Learning stuff, sharing knowledge and building on top of great ideas are my top priorities.

Leave a Reply

Your email address will not be published.

Share
Share