critical.css
File Management
File Management
Master the management of CSS and JavaScript files in your design system. Learn how to upload, organize, configure loading options, and optimize file delivery for performance.
File Organization System
CSS and JavaScript templates manage physical files with a unique section-based organization that controls where files load in your HTML:
HEADER SECTION (3 files)
Saved
Section Strategy
Header Section
Purpose: Files that load in the <head> tag
Use for: Critical CSS, essential analytics, preloaded resources
Footer Section
Purpose: Files that load before </body>
Use for: Main stylesheets, interactive JavaScript, third-party libraries
File Organization Features
The interface provides powerful organization tools:
Organization Controls
- Drag Handle (⋮⋮) - Reorder files within the same section
- Move Button (↔️) - Transfer files between Header and Footer sections
- Visual Feedback - File counts update automatically, success indicators show saves
File Upload and Discovery
Upload Process
Upload multiple CSS or JavaScript files using the upload button.
Automatic File Processing
- Validated for correct file type (.css or .js)
- Activated and ready for immediate use
- Configured with sensible default settings
- Placed in the Footer section initially
File Discovery
The system automatically discovers files in your design folders and categorizes them:
File Status Types
- Managed Files - Uploaded or activated files with full configuration options
- Discovered Files - Found in your folders but not yet activated for management
- Missing Files - Database records for files that no longer exist physically
Discovered files can be activated to bring them under management control, or deleted if no longer needed.
File Loading Configuration
CSS File Options
CSS files offer specific loading and behavior controls:
CSS Attributes
- rel attribute - "stylesheet" (normal) or "preload" (high priority)
- media attribute - "screen", "print", or "all" for media targeting
- disabled flag - Temporarily disable without deletion
- minimize flag - Compress CSS for faster loading
JavaScript File Options
JavaScript files have different loading behavior controls:
JavaScript Attributes
- type attribute - "text/javascript" (standard) or "module" (ES6)
- async flag - Load and execute immediately when available
- defer flag - Load immediately but execute after document parsing
Loading Strategy Recommendations
Performance Optimization
- Critical CSS - Use Header section with rel="preload" for above-the-fold styles
- Main CSS - Keep in Footer section for faster initial page load
- JavaScript - Use defer for most scripts, async only for independent utilities
- File Order - Arrange files within sections based on dependencies
Advanced File Management
Drag and Drop Reordering
Files within the same section can be reordered by dragging. The system provides:
Reordering Features
- Visual placeholder showing drop location
- Section constraints preventing cross-section drops during reordering
- Automatic saving when files are dropped in new positions
This reordering controls the exact sequence files load within each section.
Cross-Section Movement
Use the move button to transfer files between Header and Footer sections for performance optimization:
Strategic Movement Benefits
- Critical CSS Optimization - Move critical CSS to Header for faster rendering
- JavaScript Performance - Move non-essential JavaScript to Footer for better page load speed
- Strategic Placement - Position files based on performance requirements
File Loading Priority
Files load in this specific order:
1
Header Section Files
Load top to bottom within <head> tag
2
Page Content Rendering
Main page content loads and displays
3
Footer Section Files
Load top to bottom before </body>
File Content Editing
Files can be edited directly through the content editor, which provides:
Editor Features
- Syntax highlighting for CSS and JavaScript
- Auto-save functionality with change tracking
- Undo/Redo capabilities for safe editing
- Full-screen editing environment for complex files
File Performance Strategy
Identify Critical Resources
Determine which CSS is needed for above-the-fold content and which JavaScript is essential for initial functionality.
Optimize Placement
Move critical resources to Header section, keep non-critical resources in Footer section.
Configure Loading
Set appropriate attributes: preload for critical CSS, defer for most JavaScript.
Optimize Order
Arrange files within sections for optimal dependency resolution and optimize loading.
File Naming Strategy
Use descriptive names that indicate purpose and loading strategy:
Semantic File Names
- Priority Indicators - "01-critical.css", "02-layout.css", "03-components.css"
- Context Markers - "mobile-navigation.js", "print-styles.css"
- Functionality - "analytics.js", "carousel.js", "form-validation.js"
- Performance - "critical.css", "non-critical.css", "lazy-load.js"
This naming strategy makes file management easier and helps with performance optimization as your design system grows.