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:
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
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”
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’;
```
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
```
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.
