Home Forums Pro tips Share your tips! A layer naming strategy

  • Author
    Posts
  • #6394 Score: 0
    Ben
    Ben
    Moderator
    21 pts

    Naming things is crucial in any app that uses layers. When a page has dozens — hundreds — of elements, finding a specific item for an interaction is tricky. “Box copy 42” is meaningless. “Header background panel” helps us find what we need.

    Loosely inspired by BEM notation, I developed a convention to help me create interactions later.

    Segments

    I name my elements with segments, or colon-separated labels that explain how items fit into the project, like this:

    “Topic: component: object”

    Some examples:

    • Nav: link: text
    • Blog: post: art
    • Search: form: input

    I break long segments into groups whose last segment is the sub-element’s first segment. For example, “Nav: home” would contain “Home: icon”.

    (See attached example)

    Shorthand

    I’m not a fan of acronyms that I’ll forget next month. But sometimes segments get too long to read. So a few abbreviations are part of my personal lexicon:

    • G: — Group, useful when referring to many elements at once.
    • Root: — A group with no parent container. Useful for finding the broad sections of a project.
    • CTA: — Call to Action. The item with which I most want users to interact.
    • Nav: — Site- or app-wide navigation, often within its own group.

    Rules of thumb

    No more than three segments per layer. For example, “Nav: home: label” is acceptable, but “Nav: home: label: icon: active” is too granular to be practical. If you need that many segments, it’s time to organize elements with groups.

    Describe what it is, not what it looks like. “Nav: label: blue” isn’t a good idea because color may change with feedback — and really, “blue” is kinda vague.

    Going forward

    I’m still iterating on this system, but it’s better than “box copy 42.” I encourage you to invent a naming system so you can quickly find elements. Your future self will thank you.

    Attachments:
    You must be logged in to view attached files.
  • #8849 Score: 1

    tklepl
    Participant
    8 pts

    Hi Ben,
    A suggestion for improvement is to not append ‘copy’ when a copy of an element is made. Copy-itis happens quickly when creating many variations of one thing, such as hotspots (see attachment). Maybe they could be numbered instead, e.g. “copy 1, copy 2, copy 3” if the name must be unique…

    Natasza Libich
    Attachments:
    You must be logged in to view attached files.
    • #8872 Score: 0
      Natasza Libich
      Natasza Libich
      Moderator
      15 pts

      Good point! I’d love to see it happen too, so I’ll talk to the Team to see what can be done here. Thanks! 🙂

You must be logged in to reply to this topic. Click here to login or register