Prefix class name with js to manipulate with javascript
Written byPhuoc Nguyen
Created
23 Feb, 2021
Category
Practice
Tags
DOM, HTML
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:html
<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 about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
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