3 easy-to-apply CSS improvements that you can use in your project right now

CSS can be messy, and it usually is whether for the lack of conventions or well thought-out systems of doing things. This is why easy fixes with little to no effort is a breath of fresh air in a project that could be suffocating on a bloated code.

Font Loading

If your project was created before May of 2019, you probably don’t have a font-display property set for your Google fonts. Font display defines the way they are loaded (Here's a demo with simulation). For me, swap works best to assure that text content are loaded immediately while the actual font is still downloading. Other values are none, block, optional, and fallback.

The easiest way to do this is add the &display=swap at the end of the import link.Like so:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');


or if you’re hosting the fonts yourself:

@font-face{
font-family: ‘Roboto’;
font-display: swap;
}


Buttery-Smooth Scrolling

Divs with scrollable content are a staple of websites to manage larger content without using significant amount of screen real estates. However, you might notice that in iOS, scrolling through these divs could feel glitchy and a bit unresponsive.

You may dd the -webkit-overflow-scrolling property to improve it.

.scrollable-div{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}


Empty Elements

With components whose content are generated thru tinyMCE, say article body content, I always run into the problem of editors unmindfully adding unnecessary line-breaks.

.article p:empty { display: none; }


In this case I target the empty paragraphs inside the article. With this I can effortlessly get rid of them and at the same time maintain the visual rules of the website.

Do you have other easy CSS hacks for existing projects? Share them in the comments below. I'm all ears!

I'll also be sharing Easy-to-apply CSS before starting a project. Stay tuned if you're interested.