Semantic descriptive naming

Choose names that clearly communicate purpose, behavior, and semantics of code elements. Names should be self-explanatory and convey their intended functionality without requiring additional context.

Guidelines:

1. Use semantic names for HTML elements and attributes
   • Assign proper ARIA roles that match component functionality (e.g., role="switch" for toggle components)
   • This enhances accessibility and code clarity
2. Create descriptive UI labels and tooltips
   • Prefer specific, action-oriented labels over generic ones
   • Example: “Open standalone demo” is clearer than “Open in new tab”
3. Choose component and function names that indicate behavior and limitations
   • If a function has specific trade-offs or constraints, reflect this in its name
   • Example: Prefix with “fast” when performance is prioritized over complete correctness ```javascript // Good: Name indicates performance optimization with potential limitations import fastDeepAssign from ‘@mui/utils/fastDeepAssign’;

   // Alternative: More generic name requires additional documentation import deepAssign from ‘@mui/utils/deepAssign’; ```

4. Use consistent naming patterns for component props
   • Select prop names that clearly indicate their purpose
   • Follow established naming conventions within your codebase
   • Example: For props that modify component behavior, use descriptive prefixes: ```jsx // Clear naming pattern for skipping option highlight
   Skip highlight

   ```

When choosing between multiple naming options, prioritize clarity and predictability over brevity. Well-named elements reduce the need for comments and make code more maintainable.