Skip to main content

Layer Names

Why Layer Names Matter

Let’s talk about layer names. I use them to figure out variable names and keys in the code I generate. If your layer names are wild or make no sense, I’ll match your style. Trust me, the code will look just as wild.

The danger zone? Developers get moody about this stuff.

Don’t believe me? Ask them about tabs versus spaces sometime.

What Happens With Bad Layer Names

Here’s what happens if you go rogue with your layer names:

Screenshot of bad layer names

Bad Example: Layer named after its text content

Here, you’ve got a button component with a text layer on it. Simple, right?

But there's a problem. The text layer is named after the text inside it. That seems fine at first glance. But here’s the catch: when you name a layer after its current text, you’re locking your code into one use case. Not ideal if you want reusable components that make sense.

In this scenario, here’s the code I’ll spit out:

Bad Example
import styles from './Button.module.css';

const Button = ({ children, classes, data, elements }) => {
const rootClass = [styles.button, ...(classes ? classes : [])]
.filter(Boolean)
.join(' ');

const ButtonTag = elements?.root?.tag || 'button';
const ShopMoreNowTag = elements?.shopMoreNow?.tag || 'span';

return (
<ButtonTag {...elements?.root?.attributes} className={rootClass}>
<ShopMoreNowTag
{...elements?.shopMoreNow?.attributes}
className={styles['button__shop-more-now']}
>
{data?.ShopMoreNow}
</ShopMoreNowTag>
{children}
</ButtonTag>
);
};

export { Button };

Sure, it works, but it’s not flexible. If you ever want that button to say something else, you can do it. But it doesn't make for a friendly user experience for the engineers that have to work with it.

Trust me, your future self or your teammates will thank you for keeping things generic.

Good Layer Names To The Rescue

But if you keep your layer names clean, concise, and generic, like naming the text layer "text" instead of "Shop More Now," you set yourself up for success.

Screenshot of good layer names

Good Example: Layer named generically as "text"

Now, check out the code I generate:

Good Example
import styles from './Button.module.css';

const Button = ({ children, classes, data, elements }) => {
const rootClass = [styles.button, ...(classes ? classes : [])]
.filter(Boolean)
.join(' ');

const ButtonTag = elements?.root?.tag || 'button';
const TextTag = elements?.text?.tag || 'span';

return (
<ButtonTag {...elements?.root?.attributes} className={rootClass}>
<TextTag
{...elements?.text?.attributes}
className={styles['button__text']}
>
{data?.Text}
</TextTag>
{children}
</ButtonTag>
);
};

export { Button };

See the difference? Now your button can say anything you want, and the code stays clean and flexible. Your team will love you for it. I’ll love you for it. Everybody wins.

tip

Keep your layer names tidy, generic, and consistent. It makes your code easier to read, easier to maintain, and way more fun to work with.

Common Mistakes

Here are a few classic slip-ups I see all the time:

  • Using non-alphanumeric characters: If you toss in symbols, punctuation, or emojis, things can get wonky fast. Stick to letters and numbers—no spaces, no special characters. Otherwise, your code might break or look weird.
  • Naming layers after their current text: Like calling a text layer "Shop More Now" instead of something generic like "text". This locks your code into one use case and makes it less reusable.
  • Overly long or cryptic names: Keep it short and sweet. If your layer name looks like a password, it’s probably not helping anyone.
caution

If you use non-alphanumeric characters, spaces, or symbols in your layer names, things can get unpredictable. Your code might break, look weird, or confuse your teammates. Stick to letters and numbers for smooth sailing!

Best Practices Checklist

Before you hand off your components for me to code, run through this quick checklist:

  • Only use alphanumeric characters (A-Z, a-z, 0-9) in layer names
  • Keep names generic and reusable (e.g., "text" instead of "Shop More Now")
  • Use a consistent naming style throughout your design
  • Avoid spaces, punctuation, and special symbols
  • Make names short, clear, and descriptive
  • Double-check for typos or accidental duplicates

Nail these, and your code (and your team) will thank you!