Skip to content
FSS Knowledge Base

Naming System

Section titled “Naming System”

General

Section titled “General”

Use BEM naming system: Block_Element-Modifier

  • Block: what object/thing
    • if acronyms used, separate from words with underscore ’_’
  • Element: what part
    • prefix w underscore ’_’
  • Modifier: additional differentiator or version
    • prefix w hyphen Any part of name can be multiple words, in PascalCase, with no spaces. See Examples below.

Files/Folders

Section titled “Files/Folders”
  • NO SPACES, special chars, or commas in (future) file or folder names, especially in any files related to web content or apps, to avoid linking issues in routes (URL paths)
  • PascalCase capitalization
  • Element: prefix w comma
  • if date needed, suffix with ‘-YYYYMMDD’
  • can use ALL CAPS to emphasize importance
  • Examples:
    • AI_CodingGuidelines-COMMON.md
    • Globe_BeatingTheTSX-2025AP03.pdf (when want source sorting: Globe)
    • BeatingTheTSX-MoneySaver.pdf (when what is more important than source)
    • SmartDebtCoach-2.pdf

Routes and URL Paths

Section titled “Routes and URL Paths”
  • Domain names are case-insensitive, so always use Pascal case for better clarity and branding (eg. www.SmartDebtCoach.com).
  • Paths/routes after the domain are case-sensitive, so always use lowercase, even if Windows’ file/folder names are Pascal Case (eg. www.SmartDebtCoach.com/resources/leverage).

System Utilities

Section titled “System Utilities”
  • System utilities stored in D:\FSS\Software\Utils\ should follow Unix convention: lowercase with hyphens
  • Structure: verb-noun-detail format for clarity
  • Examples:
    • transform-obsidian-to-astro (transformation utility)
    • deploy-astro-site (deployment utility)
    • backup-database-incremental (backup utility)
  • This ensures consistency, readability, and compatibility across different systems

Coding

Section titled “Coding”

Since the goal when creating software is always to create world-class code that is clear and maintainable, these naming principles should be followed in all aspects of code development.

  • Self documenting clarity, even for indices (eg. iColor instead of i)
  • Use industry naming standards for each language. See below.

Language Standards

Section titled “Language Standards”

Apply the standard naming conventions for the specific language being used. Consistency is key.

Python (PEP 8)
Section titled “Python (PEP 8)”
  • Variables: Use snake_case (lowercase words separated by underscores).
    • Example: item_count = 5
  • Functions: Use snake_case.
    • Example: def calculate_total(items):
  • Classes: Use PascalCase (or CapWords).
    • Example: class DataProcessor:
  • Constants: Use UPPER_SNAKE_CASE.
    • Example: MAX_CONNECTIONS = 10
  • Modules: Use short, snake_case names.
JavaScript
Section titled “JavaScript”
  • Variables: Use camelCase.
    • Example: let itemCount = 5;
  • Functions: Use camelCase.
    • Example: function calculateTotal(items) { ... }
  • Classes: Use PascalCase.
    • Example: class DataProcessor { ... }
  • Framework Components (React, Svelte, Vue, etc.): Use PascalCase for component filenames and within templates/markup.
    • Example (React): function UserProfile(props) { ... } or <UserProfile />
    • Example (Svelte): <UserProfile {data} /> (in markup), UserProfile.svelte (filename)
  • Constants: Use UPPER_SNAKE_CASE for “true” constants (values that never change). Use camelCase for variables declared with const whose value might be reassigned (like objects or arrays).
    • Example (true constant): const MAX_CONNECTIONS = 10;
    • Example (reassignable const): const userSettings = { theme: 'dark' };
CSS
Section titled “CSS”

Note: Naming conventions differ for Selectors (Classes/IDs) and Custom Properties (Variables).

  • Selectors (Classes, IDs): Use kebab-case (lowercase words separated by hyphens). This is the most common convention.
    • Example: .nav-menu, #main-content
  • BEM Naming (as mentioned earlier): Can be used for more structured CSS, especially in component-based systems.
    • Block: .card
    • Element: .card__image
    • Modifier: .card--highlighted
  • CSS Custom Properties (Variables): Use -- prefix, typically in kebab-case for the variable name itself. Define them within a scope (like :root for global variables).
    • Example (Color Scheme): 
      :root {
        /* Base Palette */
        --color-primary: #007bff;
        --color-secondary: #6c757d;
        --color-background: #ffffff;
        --color-background-alt: #f8f9fa; /* Subtle background variation */
        --color-text: #212529;
        --color-text-muted: #6c757d;   /* Less prominent text */
        --color-border: #dee2e6;       /* Borders, dividers */
      

        /* Semantic Colors */
        --color-success: #28a745;
        --color-warning: #ffc107;
        --color-danger: #dc3545;
        --color-info: #17a2b8;
      

        /* State Variations (Examples for Primary) */
        --color-primary-hover: #0056b3;  /* Darker for hover */
        --color-primary-active: #004085; /* Even darker for active/press */
        --color-primary-disabled: #b0cffc; /* Lighter/muted for disabled */
      

        /* Highlight/Accent */
        --color-highlight-bg: #ffeeba;   /* Background for highlights */
        --color-highlight-text: #856404; /* Text color on highlight background */
      }