Prefix class name with js to manipulate with javascript

Written byPhuoc Nguyen

Tags

DOM, HTML

Created

23 Feb, 2021

Have you ever seen a class name starting with `js-`?

If the answer is not, then you can visit the GitHub repository and see the source of generated HTML. There are bunch of elements whose class are prefixed with `js-` such as:

<meta class="js-ga-set" name="userId" content="..." /> <meta class="js-ga-set" name="dimension1" content="..." />

They are often used to manage the list of elements that we don't want to set id for (dynamic elements, for example). In these cases, we use the `document.querySelectorAll('js-xxx')` method to retrieve the elements list.

In the other words, the `js-` classes don't define the styles, but for managing the elements in JavaScript instead. That's why they are prefixed with `js-`.

Follow this naming convention is helpful if you're working in a team. Other engineers will be aware of the class name, and don't remove them when refactoring the page.

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Prefix class name with js to manipulate with javascript

Questions? 🙋

Recent posts ⚡

Newsletter 🔔