Including External FSCSS Files

FSCSS is a preprocessor - your .fscss files are converted to standard CSS at runtime by the FSCSS execution script.

@import Method: For importing FSCSS within another FSCSS file, check out the @import documentation.

HTML Link Method

Simple integration using standard HTML link tags

JavaScript Method

More control with JavaScript execution

Error Handling

Robust implementation for production applications

Best Practices

Guidelines for choosing the right approach

Method 1: Using HTML Link Tag

The Simplest Integration Method

HTML Link

The simplest way to include FSCSS in your HTML projects using standard HTML link tags.

1

Create Your FSCSS File

Create a file with the .fscss extension (e.g., styles.fscss) and add your FSCSS code.

style.fscss 
/* Variables */
$primary-color: midnightblue;
$bg-stack: #FF9955 url(image.png) no-repeat center;
$border: 1px solid #4CAF50;

/* Body element styling */
Body {
  Background: linear-gradient(30deg, #111, #000);
  color: $primary-color!;
}

/* Select by name attribute */
$(name: foo) {
  Background: $bg-stack!;
  Border: $border!;
  %2(width, height[:200px;])
}
2

Link in Your HTML

In your HTML file, use a <link> tag with type="text/fscss" and include the FSCSS execution script.

index.html 
<!DOCTYPE html>
<html>
<head>
  <title>FSCSS Example</title>
  
  <!-- FSCSS file -->
  <link href="styles/style.fscss" type="text/fscss">
  
  <!-- FSCSS execution script -->
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.11/exec.js" async></script>
</head>
<body>
  <div name="foo">
    This div will be styled by FSCSS.
  </div>
  
  <!-- Regular CSS still works -->
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
</body>
</html>
Key Points:
  • Set type="text/fscss" to identify the file for processing
  • Include the FSCSS execution script from CDN
  • Regular CSS still works alongside FSCSS
  • Paths to local files should be relative to your HTML file

Method 2: Using JavaScript

More Control with JavaScript Execution

JavaScript

For more control, especially with dynamic loading or error handling.

Option A: Direct Script Loading

Good for simple projects without module systems.

index.html 
<!DOCTYPE html>
<html>
<head>
  <title>FSCSS JavaScript Load</title>
</head>
<body>
  <div name="card" class="card">
    This is a card styled with FSCSS.
  </div>

  <!-- Load FSCSS execution script -->
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.11/e/exec.js"></script>
  
  <script>
    // Call the exec function after loading
    exec({
      type: 'URL',
      content: 'styles/style.fscss',
      onSuccess: (styleElement) => {
        console.log('CSS applied:', styleElement);
      },
      onError: (msg) => {
        console.warn('Error applying CSS:', msg);
      }
    });
  </script>
</body>
</html>

Option B: ES Modules (Modern Approach)

Better for applications using JavaScript modules.

index.html 
<!DOCTYPE html>
<html>
<head>
  <title>FSCSS ES Module Load</title>
</head>
<body>
  <div name="card" class="card">
    Another card styled with FSCSS.
  </div>

  <script type="module">
    // Import the exec function
    import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.11/e/xfscss.min.js";
    
    // Call the exec function
    exec({
      type: 'URL',
      content: 'styles/style.fscss',
      onSuccess: (styleElement) => {
        console.log('CSS applied:', styleElement);
      },
      onError: (msg) => {
        console.warn('Error applying CSS:', msg);
      }
    });
  </script>
</body>
</html>

Enhanced JavaScript with Error Handling

Robust Implementation for Production

Error Handling

A robust implementation for production applications with comprehensive error handling.

script.js 
import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/xfscss.min.js";

// Set to false for production
const DEBUG = true; 

function applyFSCSS({ type, content }) {
  exec({
    type,
    content,
    onSuccess: (styleElement) => {
      if (DEBUG) {
        console.log("✅ FSCSS applied successfully:", styleElement);
      }
    },
    onError: (error) => {
      console.error("❌ Failed to apply FSCSS:", error);
      
      // User-friendly error message
      const errorElement = document.createElement('div');
      errorElement.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px;
        background: #ff4757;
        color: white;
        border-radius: 5px;
        z-index: 1000;
        max-width: 300px;
      `;
      errorElement.innerHTML = `
        <strong>⚠️ Style Error</strong>
        <p>Could not load styles. Please try again later.</p>
      `;
      document.body.appendChild(errorElement);
      
      // Remove error after 5 seconds
      setTimeout(() => {
        errorElement.remove();
      }, 5000);
    }
  });
}

// Example usage:
applyFSCSS({
  type: "URL",
  content: "styles/main.fscss"
});

Benefits

  • DEBUG flag for development/production modes
  • Detailed error logging in console
  • User-friendly error notifications
  • Modular and reusable code
  • Automatic cleanup of error messages

Features

  • Success confirmation logging
  • Visual error alerts for users
  • Positioned notification that doesn't disrupt layout
  • Automatic removal of error messages
  • Reusable function for multiple style sheets

Key Considerations

Choosing the Right Approach

Important Notes:
  • You must include the FSCSS execution script
  • For HTML method, type="text/fscss" is required
  • CDN is recommended for reliable script delivery
  • Path to local files should be relative to your HTML file
  • FSCSS processes files at runtime (no build step required)

HTML Link Method

When to use:

  • Simple websites and projects
  • Quick prototyping
  • When you have static stylesheets
  • When you prefer declarative approach

JavaScript Method

When to use:

  • Dynamic applications
  • When loading styles conditionally
  • When you need error handling
  • Modern JavaScript applications
  • When loading from external sources