21 Bad Front-End Habits to Drop in 2021

I get it. 2020 wasn’t the best year. We stopped exercising, started spending way too much time on Twitter, ate a lot of junk, and generally let ourselves go – and with good reason!

But 2021 has a chance to be different. So here are 21 bad front-end habits we would all be better off leaving behind.

Note: I help run the State of CSS and State of JS surveys. Leave us your email if you'd like to know when the next surveys start!

1. Complaining About CSS

CSS is deceptively easy to grasp at first. Want to make the text red? color: red. Boom. But then things start getting hairier, and before you know it you’re on Twitter complaining about CSS centering. I’ve been there myself.

But when you look at CSS’s massive job description (handling all kinds of devices across all kinds of formats, not to mention different browsers and OSs) it becomes clear that CSS is actually a pretty terrific language, especially with all its recent improvements. And if you don’t believe me, turns out 76% of respondents to the State of CSS survey actually enjoy writing CSS!

2. Complaining About JavaScript

Right after CSS-bashing, Twitter’s number two Frontend Olympic Sport has to be complaining about JavaScript. It’s making our sites bloated! It hurts accessibility! It’s overused! It’s creeping into our CSS!

But JavaScript is moving in the right direction too. React actually has a pretty good accessibility story. Svelte came out and introduced a new way to generate lighter bundles. And Next.js is experimenting with smarter server-side rendering. And even if you hate CSS-in-JS, the extra competition might push “traditional” CSS to innovate even more.

3. Writing Snarky Blog Posts About the HTML/CSS “Stack”

I’m sure you’ve come across one or two of these. The author will talk about how they are perfectly content using only HTML and CSS with no frameworks, bundlers, or libraries of any kind.

And that’s great for them, but while there’s certainly a lot to be said for the “unreasonable effectiveness” of keeping things simple (and yes, a single out-of-date package.json file can ruin your day), the truth is that many of today’s complexities came about to answer the demands of an always-evolving web. In 2021 most of us are not just working on simple, static landing pages anymore, and HTML/CSS isn’t always enough!

4. Saying Tailwind CSS is an Abomination

Tailwind CSS creator Adam Wathan has gotten so used to receiving pushback that the Tailwind CSS homepage adopts an almost apologetic tone, promising that “if you can suppress the urge to retch long enough to give it a chance, […] you'll wonder how you ever worked with CSS any other way.”

And sure Tailwind CSS might look weird and go against traditional best practices, but its popularity is certain, and it was one of the big trends in this year’s State of CSS report.

And the fact that 87% of Tailwind CSS developers are satisfied with it is enough to show that it has real advantages.

5. Saying Tailwind CSS is the Holy Grail of CSS

At the same time, there are good arguments against Tailwind CSS as well. If you’re a satisfied Tailwind CSS user that’s great, but we should always be wary of letting our passion carry over into bullying or dogmatism.

6. Putting Cookies Banners Everywhere

I know, I know GDPR and all that, but from a UX perspective those banners are a net loss. If you’re going to have one, at least have the decency to add your newsletter sign-up form in there as well, so I can dismiss both in one swoop.

7. Using Cookies

So how do you keep those Brussels bureaucrats off your back if you don’t have a cookies banner? Simple, don’t use cookies! The vast majority of apps we interact with only really need cookies for authentication, and those do not require a banner.

8. Having Client-Side Analytics

If you stop using cookies you’ll have to stop using client-side analytics and tracking, and I say good riddance! Google Analytics ranks among the most confusing apps I’ve ever used, is not always that accurate, and speaking for myself I know I probably look at barely 1/1000th of all that data, if that (and god knows what Google does with the other 999/1000th).

Server-side analytics are more reliable, and can often be enough to track key metrics. So rather than trying to track as much as possible, what if we tried to track as little as possible?

9. Hijacking People’s Scroll

Can someone explain to me why scroll hijacking (when a site uses JavaScript to change the pace at which you can scroll a page) ever became a thing? Scroll hijacking is the web equivalent of restaurants that play music so loud you can’t even carry a conversation. Stop actively making my experience worse!

Plus, CSS actually has native scroll management now, which lets you snap to specific checkpoints without making the user feel like they’re scrolling through molasses.

10. Using Margin

The margin declaration is probably one of the most commonly used in CSS, yet in 2021 there’s a small–but–growing movement of developers suggesting maybe we should stop using it.

But if you do want to continue using margins, at least take some time to finally read up on the rules of margin collapse.

11. Putting Off Learning TypeScript

At this point TypeScript seems like an inevitability. Most major JavaScript libraries are now either written in TypeScript, or in the process of being rewritten. VS Code, the most popular text editor, is written in TypeScript, and has TypeScript support built in. And despite its already-high popularity, TypeScript was the single technology with the largest year-over-year progression in the 2020 State of JavaScript survey.

Now I’m not saying you should use TypeScript for every project if you don’t want –or need– to. But I do think everybody should get familiar with its syntax and basic principles, because it might come in handy sooner than you think.

12. Using CSS Hacks

It used to be, basic CSS could help you make font bold and style your links, and everything beyond that was a hack. Need to center a div? Negative margin hack. Need to make sure it’s square? Bottom padding hack. Need to clear some floats? Clearfix hack.

But no more! It’s 2021, and there’s now documented, sane ways to make CSS do everything you need, with the last piece of the puzzle being the new aspect-ratio property. The only problem is, what will front-end developers blog about now…?

13. Ignoring Sound

Back in the era of Flash you couldn’t open a new tab without some offensively bad techno music (that’s what we used to call EDM back then) autoplaying at you. As a consequence, most of us has sworn to never build a website that produces soundwaves ever again.

But designers like Josh Comeau are showing that it’s actually possible to use sound in tasteful, even delightful ways that enhance user experience. Just remember the first rule of web sound design: NO AUTOPLAY!

14. Making Cookie-Cutter Websites

By now it’s become a cliché to say that every logo looks the same. Brands are all dropping their quirky wordmarks and adopting generic sans-serifs, becoming blands in the process.

But there’s no reason why websites have to follow the same path! Let’s move past the two possible websites and instead take inspiration from folks like Lynn Fisher, Wes Bos, or Olivia Ng (among many others) who all have their own way of using type, color, as well as the full range of CSS properties to build unique designs.

15. Using Viewport Breakpoints for Responsive Design

For years now the mantra of responsive design has been mobile-first, which usually means starting by designing for the smallest viewport size, and moving up from there. But what if there was a better way? With CSS Grid you can now build dynamic layouts that resize based on the behavior of their contents, not on some predetermined static breakpoint.

What’s more, browser vendors are hard at work on container queries (the most requested feature missing from CSS). Once they land, they might very well change the way we handle responsiveness for good.

16. Being Afraid of CSS Grid

When confronted with complex features like Grid, I think it’s common to assume that you have to master all of it before gaining the rewards of your hard work. But in this case nothing could be further from the truth.

I won’t pretend to being a Grid expert, but the cool thing about Grid is that even knowing the most basic 10% is enough to make your life way, way easier. So if you’ve been putting of learning Grid, grab a cheatsheet and get gridding!

17. Ignoring Accessibility

I’ll confess, in the past I’ve been scared off by the seemingly endless list of accessibility pitfalls. Am I using the right HTML elements? Does my site degrade gracefully? What if JavaScript doesn’t load? How does it work with screen readers? What about keyboard navigation?

But instead of throwing up my hands in frustration, my new resolution is to learn about one new accessibility issue for every site I build. For example, I recently learned about a technique called roving tabindex. If those words are just as meaningless to you as they were to me a couple months back, then why not use that as a chance to learn something new today?

18. Thinking Layouts Always go From Left to Right

As I’m typing these words, I’m watching them appear on the screen from left to right. But for many people across the world the opposite would be true. Arabic, Hebrew, and Farsi are just a few of the languages written from right to left, and CSS has been adapting to handle them better.

Logical properties let you replace “absolute” directions like margin-right and margin-left with “relative” directions like margin-block-started and margin-block-end. The faster we can get used to this new way of thinking, the better it will be for the experience of RTL users everywhere.

19. Not Blogging

Blogging is due for a comeback. Many of us use Twitter as an outlet instead, but it’s a very poor substitute, encouraging “hot takes” and bashing instead of constructive criticism and deeper thinking.

With platforms like Gatsby or Next.js, personal blogs can have all the bells and whistle you need – but there also simpler alternatives like Eleventy if you’re after something simpler. Or just use a platform like Dev.to! Anything is better than the empty calories of yet another Twitter rant.

20. Pretending Tech is Neutral

It’s tempting to think that your job description is limited to making sure clicking the button goes to the next page, without worrying about what that next page has to say.

Similarly, social media networks have for years promoted the idea that they were neutral platforms, where everything is controlled by an algorithm, and human involvement should be limited at best. But the events of recent years have shown us the often dangerous consequences of this laissez-faire approach.

This doesn’t mean you should spend every minute of your day making political statements; but it’s also clear that we each have our responsibility in making sure the products we help design and build are not actively making things worse.

21. Writing Overly Long List Articles

Don’t you hate these list articles that go on and on just so they can hit some arbitrary predetermined number of items? Whatever happened to keeping it short and sweet?

In 2021, let’s make sure we leave this outdated format behind… especially since I’m not sure I’ll be able to come up with 22 things next time!