4 CSS tricks that will get you dirty looks from other developers
Tags: tutorial, css, beginners, codepen
Published: 2020-01-10 13:41:25

---
title: 4 CSS tricks that will get you dirty looks from other developers
published: true
description: These tricks are dirty, but work like a charm
tags: tutorial, css, beginner, codepen
---

**Dirty tricks in CSS are very useful; where would YouTube players be without using `padding–bottom: 56.25%` to create a 16:9 ratio? I assembled a list of my favourite dirty tricks for you!**

#### 1. Min margins

This one gets me a lot of dirty looks, but that doesn't mean it's wrong.
If you add items that vary in width in a row with a (quite large) gap in between it can be very hard to determine when those items won't fit on the same row anymore, using a margin on only one side can also mess with centered items or make items break too soon. 

```scss
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -2rem;
}

.column {
  margin: 10px 2rem 0; // ensures a 4rem gap between items
}
```

{% codepen https://codepen.io/Sidstumple/pen/RwNQBxm %}

#### 2. Extending the clickable area
I've talked about this in a previous article, because pseudo elements like `::before` on an anchor tag (`<a>`) inherit the click-ability of its parent you can use it to extend the clickable area of a link. 

Make sure you add `position: relative` on the element you want to use as reference for the clickable area. 

In the following example I used `position: relative` to the entire `.list-item` and `position: absolute` to the pseudo element with either `top`, `left`, `right` & `bottom` set to `0`,  or `width: 100%; height: 100%;`
{% codepen https://codepen.io/Sidstumple/pen/QWwgbvq %}

Some developers would add an anchor link around the entire list item, this is really annoying to people using screen readers. It's also annoying to style, because you'd have to set the `text-transform` and `color` property to overwrite standard link behaviour on all text.

*This trick works on buttons as well🤓*

#### 3. Writing mode
[Writing mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) is a css property used to set the writing direction. This is of course meant for languages that have a different writing direction than left to right, it's also very useful to style text that has been rotated 90deg.
When you use `transform` to rotate text 90deg `padding-left` will appear on the top of the element (which is probably what you would expect) but the container also gets a weird width; see the codepen below when you click on the texts. You won't get this with `writing-mode: vertical-lr;`. The big downside of using writing mode instead of transforms is that you can't animate the rotation between two writing modes.

{% codepen https://codepen.io/Sidstumple/pen/gdXLRG %}


#### 4. Padding bottom

For some reason when you use percentages for `padding-bottom` they are not based on the `height` of the element but the `width`. This is very useful in styling YouTube embeds since you probably want it to take up 100% of the available width, but you can't always be exactly sure how wide that space is. Using `height: 56.25%` (16/9) won't work, but adding `padding-bottom: 56.25%` will!

{% codepen https://codepen.io/Sidstumple/pen/gObzbRa %}