CSS Hacks: Tips and Tricks for Improving Your Code

2 min readDec 24, 2022

CSS resets

HTML comes with a lot of default CSS settings, which we do not necessarily want, it can therefore be useful to have a CSS file or package, which resets it, like Normalize.css.

Pointer events

pointer-events: none;

This will make the element unresponsive to pointer events (hover, click, scroll…). They will instead be triggered on their parent or an element that has a lower z-index.

pointer-events: auto;

This enables the pointer events. When pointer-events: none is used on a parent element, all its children automatically inherit the property and are not interactive anymore. But if we set pointer-events: auto on an element, it will be interactive again, even if its parent is not.

Text decoration

text-underline-offset: 5px;

Designers often want a different underline offset than the one CSS has per default. Using the border-bottom property is also a possibility, but using text-decoration: underline is a lot more convenient, and also automatically adds or removes empty spaces in the line, to make sure it doesn’t cover up any letter.

At-rules

@media (hover: hover) {}

This at-rule first makes sure that a hover style is possible, and the style inside the curly brackets will only be applied if it is. This is useful to avoid displaying the hover style on touching devices (phone, iPad…) or that the style of a component stays stuck on hover (on touching device, since there is no cursor, the hover style will be applied on the element that the user last touched).

@supports not (display: flex) {}

This at-rule will test if a CSS feature is supported. It can be used in combination with the and, or, not, keywords, to specify more conditions or only apply the CSS declarations inside the curly brackets as back-up, if the specified feature is not supported.

CSS Selectors

CSS Selectors are particularly useful when it is not possible (or impractical) to use CSS classes for your content. Like if your text comes from a json or a markdown file.

Here are resources to learn more about CSS selectors: