Každý uživatel jQuery asi zná jeho metodu css(), která mění styl dané prvku nebo prvků. Tato metoda má ale dvě nevýhody: 1) mění styl každého jednotlivého prvku (což může být pomalé u hodně prvků) a nefunguje na později přidané prvky a 2) mění jen statický vzhled a neumí přidat pravidla pro hover, focus apod. nebo dokonce responzivní pravidla pro @media.

Zde přichází CSSX, které místo změny stylu prvků přidává CSS styl do dokumentu, který pak funguje stejně jako načtení *.css souboru.

Vytvoření stylu

Pomocí CSSX můžete vytvářet stylesheety (tedy CSS soubory), jednotlivá pravidla a jejich definice.

    myApp.style = cssx('myStyle');
    myApp.style.add('p', { color: 'black' });

Výše uvedený kód vytvoří nový prvek stylu myStyle (tedy HTML element style), umístí ho do hlavičky HTML stránky a do něho přidá pravidlo pro barvu odstavce:

p { color: black; } 

Změna stylu

Tím to však nekončí. Styl můžete kdykoliv později upravit a CSSX změní dříve vygenerovaný prvek v hlavičce stránky:

    myApp.style.update('p', { color: 'red' });
    myApp.style.add('a', { color: 'green' });

    //stejně lze použít:
    cssx('myStyle').update('p', {...} );

Změní styl na:

p { color: red; }
a { color: green; }

Změna definice

Jednotlivá pravidla si můžete uložit a měnit je přímo:

    myApp.text = myApp.style.add('p');
    //...
    myApp.text.update({color: blue});

Nebo můžete upravit i jejich selektor:

    myApp.text = myApp.style.add('p');
    //...
    myApp.text.update('p.note', {color: blue});

Pozor na to, že v tomto případě přestane platit pravidlo pro předchozí selektor.

Vnořování pravidel

Jednotlivá pravidla můžete do sebe vnořovat a CSSX pak sám vytvoří správný kaskádový selektor:

    myApp.text.descendant('a',
          { color: 'red' });
   //d() je alias pro descendant() 

Vytvoří nové pravidlo:

p { color: blue; }
p a { color: red; }

Opačně můžete již existujícím pravidlům přidat prefix:

    myApp.text.scope('.article');

Změní CSS na:

.article p { color: blue; }
.article p a { color: red; }

Mazání pravidel

Jednotlivá pravidla můžete i mazat, pokud je již nepotřebujete:

myApp.style.clear(); //smaže stylesheet
cssx.clear(); //smaže všechny pravidla

Responzivní pravidla

CSSX umí vytvářet i responzivní pravidla:

myApp.mobile = cssx('responsive');
myApp.phone = myApp.mobile.add(
       '@media (max-width: 400px)');
//...
myApp.phone.nested('img', { 
    'display': 'block',
    'max-width': '80%',
    'margin': '1em auto'
});

Tento skript vytvoří nový styl pro responzivní layout:

@media (max-width: 400px) {
    img { 
        display: block;
        max-width: 80%;
        margin: 1em auto;
    }
}

Dynamické změny

Všechny zde uvedené způsoby generování CSS můžete přizpůsobit tím, že místo konkrétní hodnoty uvedete funkci, která danou hodnotu vrací. CSSX pak vaši funkci zavolá pokaždé, když potřebuje změnit pravidla:

var getSel = function() { 
          return myApp.all ? 'p' : 'span'; }
var getStyle = function() {
          return {color: myApp.color}; }

myApp.style.add(getSel, getStyle);
//...
myApp.all = false;
myApp.color = 'green';
myApp.style.compile(); //zavolá funkce

Vytvoří css:

span { color: green; }

Vytvářet můžete i makra, která změní více hodnot najednou:

myApp.style.define('barva', function(value) {
    return {
        color: value,
        border: '1px solid ' + value,
    };
});
myApp.text.update({barva: 'blue'});
//změní barvu textu a rámečku

Pluginy

Pokud vám nestačí dynamické změny přes funkce, můžete napsat vlastní plugin, který pak může měnit všechny pravidla před tím, než se vykreslí:

myApp.box = function(style) {
    style['box-sizing'] = 'border-box';
    return style;
}
cssx.plugins([myApp.box]);

Následně vygeneruje pravidla:

.article p { 
    color: blue; 
    box-sizing: border-box;
}
.article p a { 
    color: red; 
    box-sizing: border-box;
}

Nebo můžete i kontrolovat hodnoty:

myApp.moreRed = function(style) {
    if (style.color === 'red') {
        style['background'] = 'red';
        style['color'] = 'yellow';
    }
    return style; 
}

cssx.plugins([myApp.moreRed]);

Vytvoří:

.article p { color: blue; }
.article p a { 
    color: yellow; 
    background: red;
}

Změna DOMu

Další výhoda CSSX oproti jquery.css() je v tom, že jQuery mění styl okamžitě s každým zavoláním, což pak může zdržovat prohlížeč při vykreslování stránky.

Naproti tomu CSSX změny shromažďuje a aplikuje je najednou po určité době (řádově milisekundy).

Pokud plánujete větší změnu stylů, můžete dočasně vypnout vytváření pravidel v DOMu:

cssx.domChanges(false);
//... změny pravidel

cssx.domChanges(true); //aplikuje změny

Pokud naopak potřebujete vynutit překreslení stránky:

cssx.domChanges(true); //povolí změnu DOM

//překreslení stránky ihned:
myApp.style.compileImmediate();
//překreslení okamžitě po další změně:
cssx.nextTick(false);

Pro debugování nebo produkci můžete zapnout nebo vypnout minifikaci pravidel, které pak ovlivní, jak CSSX generuje styly:

if (window.developerMode) {
    cssx.minify(false);
}
else { //produkční server
    cssx.minify(true);
}

Stažení a použití

Pokud máte jednoduchý projekt a nechcete se zabývat žádnými NPM, Require, React a podobnými instalátory ani kompilátory kódu, stačí si stáhnout soubory ze složky /packages/cssx/lib a nahrát JS soubory na váš web a použít tak, jak je uvedeno výše.

CSSX nabízí i transpiler (překladač), který umožňuje psát pravidla tak, jak je píšete do CSS souborů a ty pak přeložit na validní javascript:

myApp.style = <style>
  p { color: black; }
</style>;

K tomu je potřeba mít CSSX nainstalované na serveru:

> cssx -i ./src/style.js -o /www/style.js

Nebo překládat pravidla přímo v prohlížeči:

$.ajax('style.js').then(function(style) {
    eval(cssxTranspiler(style));
});

Všechny možnosti použití CSSX najdete na GitHubu.