5 CSS tips you didn't know you needed
Tags: webdev, css, tips, devtips
Published: 2018-11-28 22:53:39

---
title: 5 CSS tips you didn't know you needed
published: true
description: 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 to day, that I barely even think about.
tags: webdev, css, tips, devtips
cover_image: https://thepracticaldev.s3.amazonaws.com/i/grfhri8puehnybdcjh8i.jpeg
---

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 to day, that I barely even think about. Some of them are fairly standard, and others are a bit more unusual, but all of the snippets and examples below are things that I've used on client websites.

### Transitions

By default on all of the websites I build, I always add a CSS transition on the links and buttons for their hover state. It just adds a nice effect on hover, and takes away from that harsh/abrupt change when you interact with a button or link.

```css
// Background colour transition
transition: background 0.2s ease-in-out;
```

For a button I'd most likely add the transition for the background colour as shown above, for a link I'd set the transition property to all (`transition: all 0.2s ease-in-out`) which could allow me to transition the hover colour and border for example.

I also never use `text-decoration: underline`. You don't have much control using that, whereas you can use a bottom border to get a much nicer effect. Padding allows for better spacing, and you can even transition or animate the border if you'd like.

```scss
.link {
    transition: border 0.2s ease-in-out;
    border-bottom: 1px solid transparent;
}

.link:hover {
    border-color: blue;
}
```

### Background overlay

Say you have some text, positioned absolutely on top of an image. But the background image is too bright, making the text unreadable. You could add another `div` in there somewhere to create a dark overlay behind the text, however this is not great and adds an extra empty `div` that is not really necessary.
 
Pseudo-elements to the rescue! 

Using the `:before` element means we can also apply it if a certain class is added to the `div` for instance. Below is an example of how I would achieve this overlay background:
{% codepen https://codepen.io/lynnewritescode/pen/aQRPNL %}
The key part in the above code is setting your overlay colour, and opacity level. This can be any colour, I've just used black and white as an example:

```scss
//Black overlay - 0.5 opacity
background: rgba(0,0,0,0.5);

//White overlay - 0.2 opacity
background: rgba(255,255,255,0.2);
```

### Multi-line underline effect

The pen below is something that may or may not be useful to people, but it is something I was asked to do on a client website. It allows the ability to have a bold underline effect which will span across a sentence to the length of that sentence, even if it's wrapped over multiple lines.
{% codepen https://codepen.io/lynnewritescode/pen/mwqBbX %}
Even if this doesn't apply to your design, or requirements. It can also be used for things such as a link hover effect like the one shown below:
{% codepen https://codepen.io/lynnewritescode/pen/zMmyJW %}
### Sticky elements

Need an element to stick on scroll, but don't want to use JavaScript, or a plugin, or the height of your content is dynamic and likely to change? `position: sticky` is your friend.

```scss
position: -webkit-sticky;
position: sticky;
top: 0px;
```

This was incredibly handy for me when I had to have a sidebar stick next to an accordion element. Because of the accordion opening and closing, I would have had to calculate the height or use some other complicated method, when `position: sticky` just worked straight away. The only thing I've found to look out for is that it doesn't work when the body element is set to `overflow: hidden`, and is not supported in IE11 (it just doesn't stick, and Edge is fine).

### Prevent highlighting

Being able to select text on a website is fairly standard and expected, however I've found occasionally that the user can click multiple times on an element (for example a carousel arrow) and it selects/highlights the element.

To prevent this, you can use the following snippet:
```scss
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
```


If you got this far, thanks for reading! I hope this comes in handy for some people and I hope to do some further posts with some more day to day snippets if that is of interest to anyone.

Follow me on [twitter](http://twitter.com/lynnewritescode) and [instagram](http://instagram.com/lynnewritescode) for more dev related stuff!