In this quick tip we learn how to name elements on the page and learn popular naming conventions.

In this Quick Tip, we’re going to learn about how to name our elements on our page.

Whenever you add an element to the page, Bubble will automatically name it with the name of that element. For example, we add a button element to the page and it’s automatically named Button. Depending on how many buttons are on the page, Bubble will add a lettering system to keep track. If we have no other buttons on the page, Bubble names this element Button A. If we add another button, it will be named Button B. This is the paradigm Bubble follows for each element you add to the page.

If you change the contents of that element to include text, Bubble will take that text and change the name of the element for you, so you know what it is. For example, if we change this button text to say Submit, Bubble will change the name of this button to say Button Submit. Because of this, you can easily have duplicate names so manually editing the name of your elements can be key as your app grows.

To change an element's name, simply select it in the property editor, and start typing. Conventions for naming your elements is entirely up to you. For example, you could simplify each element name and write what it does like BTN Submit. You could even append parent or child depending on how far down your element is grouped to get a better view in your elements tree.

Whichever convention you pick, make sure to use it throughout your app. The consistency will help as your app grows.

That’s it for Quick Tip! For more, be sure to check out bubble.io/academy.
​