Obsidian-CSS-Snippets 🎛️

File Naming System:

area-feature-mode.css

Vocabulary - Legend 🔑

• area → where the snippet applies
• feature → what it changes
• mode → when it applies

Feature

Describes what the snippet changes or does.

Examples:

• header-colors → changes header colors
• no-image-filenames → hides image filenames
• link-styles → modifies link appearance
• callouts → styles callout blocks
• sidebar-cleanup → adjusts sidebar layout
• card-layout → changes layout structure

Area

• canvas ➝ canvas only
• notes ➝ markdown notes
• global ➝ everywhere
• ui ➝ app interface (menu, sidebars, etc.)

Mode

• editor → editing (source + live preview)
• preview → reading view (fully rendered)
• global → both / always active

Examples:

• canvas-no-image-filenames-preview.css
• global-header-colors-preview.css

Purpose

Readable, organized Obsidian CSS snippets designed to eliminate confusion (area-feature-mode file naming system)

Notes

I’m still learning, but I wanted to share this system in case it helps others. Constructive feedback is welcome.