DEV Community

Mac Daniel
Mac Daniel

Posted on • Updated on

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('');

or if you’re hosting the fonts yourself:

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.

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.

Top comments (5)

eionrobb profile image
Eion Robb

webkit-overflow-scrolling is deprecated as of Safari 13

Perhaps suggesting when to use font-display:none would be helpful, like when using FontAwesome instead of showing tofu blocks while its loading in the icons

seibmacdaniel profile image
Mac Daniel

Great points. No one wants those tofu blocks! :D

bytet profile image

Keep em coming Mac!👍

willowbeehive profile image
Willoughby Labs

Thanks for this! I just recently learned about the font swap and was pleasantly surprised the import links from Google Fonts include it by default.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.