360TFT CSS Architecture Documentation

Modular CSS Structure

The 360TFT website uses a modular CSS architecture to maintain code organization, eliminate duplication, and improve performance. All styles are now organized into three main files:

Core CSS Files

1. base.css (1.5KB)

Purpose: Foundation styles and reset Contains:

• CSS reset (* { margin: 0; padding: 0; box-sizing: border-box; })
• HTML and body base styles
• Typography foundations
• Core color variables and dark theme setup

2. components.css (13KB)

Purpose: All component-specific styles Contains:

• Navigation components (.navbar, .nav-links, etc.)
• Button components (.btn-primary, .btn-secondary, .cta-button, etc.)
• Card components (.testimonial-card, .feature-card, etc.)
• Hero section styles (.hero, .hero-content, etc.)
• Form components (.form-group, .input-field, etc.)
• Community activity components (.live-stats-bar, .community-activity-feed, etc.)
• Academy page components (academy-landing-page styles, .hero-badge, etc.)
• Layout components (.container, .section, etc.)

3. utilities.css (7.5KB)

Purpose: Reusable utility classes and helper styles Contains:

• Spacing utilities (.margin-, .padding-, etc.)
• Text utilities (.text-center, .text-white, etc.)
• Display utilities (.hidden, .visible, etc.)
• Responsive helpers (.mobile-only, .desktop-only, etc.)
• Accessibility utilities (.sr-only, .focus-visible, etc.)

Loading Strategy

The CSS files are loaded in the following order in _includes/head.html:

<!-- Critical CSS is inlined for above-the-fold content -->
<style>/* Critical CSS for FCP optimization */</style>

<!-- Load modular CSS architecture -->
<link rel="stylesheet" href="/assets/css/base.css">
<link rel="stylesheet" href="/assets/css/components.css">
<link rel="stylesheet" href="/assets/css/utilities.css">

<!-- Legacy fallback -->
<link rel="stylesheet" href="/assets/css/main.css" media="print" onload="this.media='all';">

Enhancement CSS

Additional enhancement files are loaded asynchronously:

• touch-friendly.css - Touch and mobile enhancements
• accessibility.css - Extended accessibility features

Deprecated Files

The following files are now deprecated and consolidated into the modular structure:

• ✅ community-activity.css → merged into components.css
• ✅ academy-pages.css → merged into components.css
• ⚠️ main.css → kept as fallback only
• ⚠️ main-optimized.css → replaced by modular architecture

Naming Conventions

The CSS follows BEM (Block Element Modifier) methodology where applicable:

/* Block */
.hero { }

/* Element */
.hero__content { }
.hero__title { }

/* Modifier */
.hero--dark { }
.hero__title--large { }

Performance Benefits

1. Reduced File Size: Eliminated duplicate styles across files
2. Better Caching: Modular files can be cached independently
3. Faster Loading: Critical CSS inlined, non-critical CSS loaded progressively
4. Maintainability: Clear separation of concerns between base, components, and utilities

Development Workflow

When adding new styles:

1. Base styles → Add to base.css (typography, colors, reset styles)
2. Component styles → Add to components.css (specific UI components)
3. Utility classes → Add to utilities.css (reusable helper classes)

File Size Comparison

Browser Support

The modular CSS architecture supports all modern browsers and includes fallbacks for older browsers through the legacy main.css file.

Last updated: Task 34.3 - Create Modular CSS Architecture