cssx

Primeros Pasos con CSSX

CSSX es un preprocesador de CSS revolucionario que te permite escribir HTML y CSS en un único archivo. Usando sintaxis familiar de CSS y anidamiento, puedes definir toda la estructura de tu página web en un solo lugar.

¿Qué es CSSX?

CSSX transforma sintaxis similar a CSS en páginas HTML completas con estilos. En lugar de escribir archivos HTML y CSS separados, escribes todo en archivos .cssx usando selectores CSS para definir la estructura HTML y propiedades CSS para el estilo.

Instalación

Puedes usar CSSX sin instalarlo globalmente usando npx:

BASH

npx cssx-build

O instalarlo localmente en tu proyecto:

BASH

npm install cssx-build

Sintaxis Básica

La propiedad --content establece el contenido de texto de un elemento:

CSSX

p {
    --content: "Este es el contenido del párrafo";
    font-size: 16px;
    color: blue;
}

Esto genera el siguiente HTML:

HTML

<p class="cssx-cDU0">Este es el contenido del párrafo</p>

Estructura Anidada

Usa anidamiento de CSS para definir tu jerarquía HTML:

CSSX

nav {
    background: #333;
    
    ul {
        list-style: none;
        
        li {
            --content: "Elemento de Menú";
            display: inline-block;
            padding: 10px;
        }
    }
}

Atributos Dinámicos

Cualquier propiedad personalizada que comience con -- puede usarse para establecer atributos HTML. Ejemplos comunes incluyen --href, --onclick, --src y --target:

CSSX

button {
    --content: "Haz clic aquí";
    --onclick: "alert('¡Hola, Mundo!')";
    padding: 10px 16px;
    background: #0066cc;
    color: white;
    border: none;
    cursor: pointer;
}

Genera:

HTML

<button class="cssx-YnV0dG9u" onclick="alert('¡Hola, Mundo!')">Haz clic aquí</button>

Enlaces e Imágenes

CSSX

a {
    --content: "Visita nuestro sitio web";
    --href: "https://ejemplo.com";
    --target: "_blank";
    color: #0066cc;
}

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

Componentes Reutilizables

Importa componentes CSSX para reutilizar código en todo tu proyecto:

CSSX

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

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

Metadatos del Documento

Usa el selector :root para definir los metadatos de la página:

CSSX

:root {
    --lang: "es";
    --title: "Mi Sitio Web Increíble";
    --description: "Construido con CSSX";
    --icon: "favicon.svg";
    --transition: "true";
}

Ejemplo Completo

Aquí hay un ejemplo completo de una página de inicio simple:

CSSX

:root {
    --title: "Bienvenido a CSSX";
    --description: "Construye sitios web con sintaxis CSS";
}

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: "Bienvenido a CSSX";
            font-size: 48px;
            margin: 0 0 16px;
        }
        
        p {
            --content: "Construye sitios web usando sintaxis CSS";
            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: "¿Por qué CSSX?";
                color: #667eea;
            }
            
            p {
                --content: "CSSX simplifica el desarrollo web combinando estructura HTML y estilos CSS en un solo archivo.";
                line-height: 1.6;
            }
        }
    }
}

Flujo de Trabajo de Desarrollo

Inicia el servidor de desarrollo con recarga en vivo:

BASH

npx cssx-build --watch --serve

Compilar para producción:

BASH

npx cssx-build --output dist

Próximos Pasos

Ahora que entiendes lo básico: