When naming elements on the front-end that users will see directly, the primary rule is to use clear, concise, and descriptive language that accurately reflects the element's function, avoiding jargon and technical terms wherever possible; additionally, maintain consistency in capitalization and formatting across your application.
Key points to consider:
Use plain language: Opt for words that are easily understood by your target audience, even if they are not tech-savvy.
Be specific: Choose names that accurately describe the element's purpose, avoiding overly general terms like "button" or "box."
Consider context: Take into account the surrounding elements and overall page structure when naming things to avoid confusion.
Capitalization consistency:
PascalCase: Use for titles and headings (e.g., "Submit Order").
Sentence case: For labels and short descriptions (e.g., "Enter your email").
Examples of good naming practices:
Button labels: "Save Changes", "Add Item", "View Details"
Form field labels: "First Name", "Password", "Delivery Address"
Navigation links: "Home", "About Us", "Contact"
Error messages: "Please enter a valid email", "Password cannot be blank"
What to avoid:
Technical jargon: Don't use terms like "submitForm" or "userSession" directly in user-facing elements.
Ambiguous names: Avoid "click here" or "select option" without providing clear context.
Inconsistent capitalization: Mixing up capitalization styles can be confusing.
Too many words: Keep labels short and to the point.
Top comments (0)