majiayu000 DMC Best Practices
Definitive best practices for building Dash applications with Dash Mantine Components. Rules are organized by impact level and category.
Priority Categories
| Priority | Category | Impact | Prefix | Rules |
|---|---|---|---|---|
| 1 | Architecture | CRITICAL | arch- |
4 |
| 2 | Callbacks | CRITICAL/HIGH | callback- |
6 |
| 3 | Styling | HIGH/MEDIUM | style- |
5 |
| 4 | Data Management | HIGH | data- |
4 |
| 5 | Performance | MEDIUM-HIGH | perf- |
3 |
| 6 | Forms & Validation | MEDIUM | form- |
2 |
| 7 | Theming | MEDIUM | theme- |
3 |
| 8 | DMC v2.x Migrations | MEDIUM | v2- |
2 |
| 9 | Accessibility | MEDIUM | a11y- |
1 |
Top 10 Critical Rules
- Wrap layout in MantineProvider - All DMC components require it
- Never modify global variables in callbacks - Breaks multi-worker deployments
- Use State not Input for values that shouldn't trigger callbacks
- Define callbacks before app.run() - Registration must happen first
- Prevent circular callbacks - Outputs feeding inputs cause infinite loops
- Return JSON-serializable values - Only dict, list, str, number, bool, None
- Use static CSS selectors - Never target
.m_*dynamic classes - Custom colors need 10 shades - Exactly 10 (0=lightest, 9=darkest)
- Use dcc.Store for client data - Not global variables
- Debounce text inputs - Limit callback firing on rapid changes
Rules Index
Architecture (CRITICAL)
- arch-mantine-provider - Wrap Layout in MantineProvider
- arch-callback-order - Define Callbacks Before app.run()
- arch-circular-callbacks - Prevent Circular Callbacks
- arch-global-variables - Never Modify Global Variables
Callbacks (CRITICAL/HIGH)
- callback-input-vs-state - Use State for Non-Triggering Values
- callback-json-serializable - Return JSON-Serializable Values
- callback-prevent-update - PreventUpdate vs no_update
- callback-debounce - Debounce Text Inputs
- callback-context - Use ctx.triggered_id Correctly
- callback-prevent-initial - Use prevent_initial_call Appropriately
Styling (HIGH/MEDIUM)
- style-static-selectors - Use Static Selectors Only
- style-props-limit - Limit Style Props to 3-4 Per Component
- style-responsive-css - Use CSS Media Queries for Responsive
- style-css-variables - Prefer CSS Variables Over Hardcoded
- style-classnames-over-styles - Use classNames Over styles Prop
Data Management (HIGH)
- data-dcc-store - Use dcc.Store for Client-Side Data
- data-server-caching - Use Server-Side Caching for Large Data
- data-session-isolation - Isolate Cache by Session ID
- data-signaling-pattern - Use Signaling Pattern for Expensive Ops
Performance (MEDIUM-HIGH)
- perf-clientside-callbacks - Use Clientside Callbacks for Frequent Updates
- perf-memoization - Memoize Expensive Functions
- perf-webgl-charts - Use WebGL for Large Scatter Plots
Forms & Validation (MEDIUM)
- form-validation-pattern - Validate Early, Fail Fast
- form-error-handling - Return User-Friendly Error Messages
Theming (MEDIUM)
- theme-custom-colors - Custom Colors Need 10 Shades
- theme-light-dark-mode - Test Both Light and Dark Modes
- theme-component-defaults - Set Component Defaults in Theme
DMC v2.x Migrations (MEDIUM)
- v2-breaking-changes - DMC v2.x Breaking Changes
- v2-notification-container - Use NotificationContainer Not Provider
Accessibility (MEDIUM)
- a11y-labels-required - Always Provide Labels for Inputs
Full Reference
See AGENTS.md for the complete compiled reference with all rules expanded.