When To Use cssRules
- Use
cssRulesfor component states and pseudo elements (::before/::after), not for simple color swaps. - Use module-scoped selectors to avoid accidental cross-screen leaks.
- Pair
cssRuleswithadvancedCss.variablesso your rules stay readable and maintainable.
Core Patterns (Production)
| Pattern | Selector Example | What You Change | Where To Test |
|---|---|---|---|
| Material Surface | .ccb-start, .ccb-group, .ccb-tile | Panel material, border, shadow, stripe overlays. | Main menu command center. |
| Interaction States | .menu-btn:hover, .season-quest-tab.active | Hover/active contrast and readability. | Main menu buttons, quest tabs. |
| Pseudo Control | #mainMenu .menu-box::before | Enable/disable ornamental layers or cinematic haze. | Main menu background. |
| Module Isolation | #seasonPassModal ... | Full module skin without touching global styles. | Season Pass modal. |
| Scene Exception | .bounty-market-scene::before/::after | Preserve cinematic fades while flattening rest. | Broker market scene. |
Selectors You Can Reliably Target
| Area | Selector Family | Notes |
|---|---|---|
| Main Menu | .ccb-*, #accountBtn, #seasonPassBtn, .inbox-btn | Primary identity layer; most theme previews derive from these. |
| Account + Theme Picker | #accountModal ..., .ui-theme-item, .account-list-item | Use per-theme card design in selector/archives. |
| Season Pass + Quests | #seasonPassModal ..., #seasonQuestModal ... | Must be explicitly themed per pack to avoid default fallback. |
| Research | #researchModal ..., .research-* | Toolbar, lanes, cards, tabs and search states. |
| Bounty + Market | #bountyBoardModal ..., .bounty-* | Keep broker portrait colors untouched; style shell/controls only. |
| Inbox | #inboxModal ..., .inbox-* | Rows, toolbar, detail panes, unread states. |
Safe Rule Authoring Checklist
- Start with one module and one selector block.
- Prefer variable-driven values:
background: var(--ui-imperial-card). - Only use
!importantfor modal-specific shells where base CSS is very specific. - After each block, test: normal, hover, active, disabled, focus.
- Verify no leakage into theme picker previews for other themes.