DEV Community

Cover image for 21 Bad Front-End Habits to Drop in 2021
Sacha Greif
Sacha Greif

Posted on

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!

Top comments (15)

Collapse
 
_stevefenton profile image
Steve Fenton 💙

It's great to challenge established norms, so thanks for this article. Item 21 made me chuckle.

There's a bit of an urban myth mixed up in items 6-8, which is that laws such as the EU General Data Protection Act (GDPR), or the California Consumer Privacy Act (CCPA) are about "cookies". They most definitely aren't. The laws cover the collection and processing of data, no matter what technology you are using (even pen and paper). Collecting analytics server-side is covered by these laws just as much as collecting is client-side - and the notification about this processing, and the collection of either consent or objections to legitimate interest are legal requirements.

However, as you say - it's not necessary to go-full-modal on people or be invasive with notices and options. In many cases, the notices and consent forms seem to be explicitly designed to prevent a user from making an informed decision. This is the polar opposite to the intention of the privacy laws.

To summarise!

  • GDPR/CCPA are not "cookie laws", they are "privacy laws"
  • The laws apply to data collection and processing, not a specific technology
  • It is a legal requirement to explain to data subjects how their information will be used and for them to be able to reject "other processing purposes" (either by objecting to legitimate interest, or refusing their consent - depends on the type of processing)

Hopefully that wasn't to dry... but although privacy isn't the most exciting area in tech, it's important that we get it right as we are seeing what happens when tech doesn't pay attention to these laws.

Collapse
 
sachagreif profile image
Sacha Greif

Thank you for your very informed response! You're absolutely right, for some reason in my mind server-side analytics were in a different category but from the law's perspective it shouldn't really make a difference how data is collected.

Collapse
 
fernandocomet profile image
Fernando Comet

Also stop Hijacking right button!

Collapse
 
hawkeyetwolf profile image
Hawkeye Tenderwolf

I recently found "StopTheMadness" extension on MacOS to help with this (and other terrible things like scroll hijacking):

underpassapp.com/StopTheMadness/

Collapse
 
lawrencedol profile image
Lawrence Dol

Instead, hijack the wrong button!

Collapse
 
hexanal profile image
Fred

These are all great points! I especially like 8 & 14 :)

About 4 & 5: isn't Tailwind CSS just another Bootstrap? Useful for people who don't want or don't know how to write CSS, and want to build an interface quickly? If so, it probably means devs like me will never use it, but hey... if it helps you build that cool startup app while staying sane, I say go for it.
I'm often wrong about trends but I don't believe the hype on this one; and if it does become the de facto way of building UI, then... damn!

Collapse
 
macbruker profile image
Martin B

I don't believe that comparison is fair. The commercial service called Tailwind UI would be a closer match. Utility classes is a different way of working with CSS, and it very much requires CSS knowledge to use it in any meaningful way.

Several other frameworks are built on the same utility principles, but they are lacking some efforts to gain the success Tailwind CSS has achieved. I think that comes down to a mix of things. Marketing, good documentation, choosing the "right technology" to build the framework, research and careful decision making, and a lot of hard work.

That exact framework is promoting a utility-first approach, but I think a lot of people read it as utility-only. Mixing is ok. If someone choose to use that framework, they should think critically about the default configuration, and take steps to change what is useful for their project

Working with a utility classes framework isn't for everyone, and that is very ok :)

Collapse
 
hexanal profile image
Fred

You're right. I haven't used it yet, and I'm warming up to the idea of going "utility-first" so I should do my homework before complaining about it!

Like I said, if it makes website development easier (to get into, to maintain projects, etc.), it's a win in my book.

Collapse
 
jamiesauve profile image
Jamie Sauve

Thanks for the article! I get stuck in how my company does things sometimes and it was really cool to see some other perspectives on things - number 18 especially! I've added a bunch of the links in here to my reading list :)

Collapse
 
insign profile image
Hélio oliveira • Edited

Since TypeScript even using MIT license, it is not a standard and probably should be avoided besides his advantages. All the success of javascript as well the web, is based on follow great-slow standard.

Collapse
 
romanisthere profile image
RomanistHere

I was so annoyed by number 6 back there that I actually created an extension to fix it. PopUpOFF (romanisthere.github.io/PopUpOFF-We...) - it's free and open-source, check it out if you're annoyed like me, though I'm not now :)

Collapse
 
zahirinatzuke profile image
Yohan González

Excelente artículo

Collapse
 
gavinr profile image
Gavin Rehkemper

Blogging - don't forget about Hugo - the FASTEST of them all! (gohugo.io)

Collapse
 
krulik profile image
Serge Krul

Wow Sacha you've sent me down a rabbit hole of 5 hours! So many wonderful links and references. Well written, researched and done! Very thoughtful tips! Thanks you

Collapse
 
ronaldohoch profile image
Ronaldo Hoch • Edited

13 - Ignoring Sound

Blow my head!