cssx

Getting Started with CSSX

CSSX is a revolutionary CSS preprocessor that allows you to write HTML and CSS in a single file. Using familiar CSS syntax and nesting, you can define your entire webpage's structure, content, and styling in one place.

What is CSSX?

CSSX transforms CSS-like syntax into complete HTML pages with styles. Instead of writing separate HTML and CSS files, you write everything in .cssx files using CSS selectors to define HTML structure and CSS properties for styling.

Installation

You can use CSSX without installing it globally using npx:

BASH

npx cssx-build

Or install it locally in your project:

BASH

npm install cssx-build

Basic Syntax

The --content property sets the text content of an element:

CSSX

p {
    --content: "This is the content of the paragraph";
    font-size: 16px;
    color: blue;
}

This generates the following HTML:

HTML

<p class="cssx-cDU0">This is the content of the paragraph</p>

Nesting Structure

Use CSS nesting to define your HTML hierarchy:

CSSX

nav {
    background: #333;
    
    ul {
        list-style: none;
        
        li {
            --content: "Menu Item";
            display: inline-block;
            padding: 10px;
        }
    }
}

Dynamic Attributes

Any custom property starting with -- can be used to set HTML attributes. Common examples include --href, --onclick, --src, and --target:

CSSX

button {
    --content: "Click me";
    --onclick: "alert('Hello, World!')";
    padding: 10px 16px;
    background: #0066cc;
    color: white;
    border: none;
    cursor: pointer;
}

Generates:

HTML

<button class="cssx-YnV0dG9u" onclick="alert('Hello, World!')">Click me</button>

Links and Images

CSSX

a {
    --content: "Visit our website";
    --href: "https://example.com";
    --target: "_blank";
    color: #0066cc;
}

img {
    --src: "logo.png";
    --alt: "Company Logo";
    width: 200px;
}

Reusable Components

Import CSSX components to reuse code across your project:

CSSX

header {
    --import: "../components/header.cssx";
}

footer {
    --import: "../components/footer.cssx";
}

Document Metadata

Use the :root selector to define page metadata:

CSSX

:root {
    --lang: "en";
    --title: "My Awesome Website";
    --description: "Built with CSSX";
    --icon: "favicon.svg";
    --transition: "true";
}

Complete Example

Here's a complete example of a simple landing page:

CSSX

:root {
    --title: "Welcome to CSSX";
    --description: "Build websites with CSS syntax";
}

body {
    font-family: system-ui;
    margin: 0;
    background: #f5f5f5;
    
    header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 60px 20px;
        text-align: center;
        
        h1 {
            --content: "Welcome to CSSX";
            font-size: 48px;
            margin: 0 0 16px;
        }
        
        p {
            --content: "Build websites using CSS syntax";
            font-size: 20px;
            opacity: 0.9;
        }
    }
    
    main {
        max-width: 800px;
        margin: 40px auto;
        padding: 20px;
        
        section {
            background: white;
            padding: 32px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            
            h2 {
                --content: "Why CSSX?";
                color: #667eea;
            }
            
            p {
                --content: "CSSX simplifies web development by combining HTML structure and CSS styling in one file.";
                line-height: 1.6;
            }
        }
    }
}

Development Workflow

Start the development server with live reload:

BASH

npx cssx-build --watch --serve

Build for production:

BASH

npx cssx-build --output dist

Next Steps

Now that you understand the basics: