Ultimamente ho giocato con i CSS (e altre tecnologie web). Sono un programmatore non web e probabilmente questo sta influenzando troppo il mio approccio.
Ho trovato la sintassi CSS molto limitata, quindi ho dato una possibilità a SASS e LESS (principalmente quest'ultima). Queste due lingue sono molto più utili, ma sto ancora affrontando diversi problemi: sembra che queste lingue non mi permettano di fare la maggior parte delle cose che mi piacerebbe fare. Ho la sensazione che queste lingue mirino ad essere il meno invasive possibile, rimanendo molto vicine ai CSS e avendo una comprensione molto limitata di ciò che sta accadendo; il risultato è una specie di mix strano tra un macro processore e un linguaggio dichiarativo.
Ad esempio, alcune delle cose che mi danno mal di testa in LESS sono:
- La pigrizia del linguaggio rende piuttosto difficile capire il flusso di esecuzione (e prevedere se qualcosa è definito e qual è il suo valore)
- Non è possibile accedere alle proprietà CSS, è necessario fare affidamento sulle variabili LESS
- Scoping è in qualche modo non chiaro (probabilmente a causa della pigrizia e del modo in cui i mixin sono estesi)
- Se non presti molta attenzione, il risultato tende ad essere subottimale, con molta pubblicità ecc.
- La sintassi non è molto bella: non mi piace usare @ per le variabili, @ {} per i nomi di classi variabili,
Credo che una soluzione migliore potrebbe essere quella di generare CSS da un linguaggio di programmazione reale (con una sintassi ben nota e un carico di funzioni disponibili) che tenga traccia di tutte le proprietà di ogni selettore e dove la mia logica sia eseguita in sequenza. Qui proverò a delineare un esempio di ciò che ho in mente; Sto usando JavaScript e un approccio ispirato a jQuery:
var x = new CSS('HTML5');
// 'x' is my Style it started off from the default HTML5 CSS stylesheet.
// 'x(selector)' will allow us to access the style of the 'selector' CSS selector.
x.import('file.css'); // let's import some more rules
console.log( x('a').fontSize ); // Prints the default font-size property for 'a' elements
x('.myClass > p').display = 'block'; // CSS: .myClass > p { display: block; };
var c1 = x('body > div .class1'); // Just for commodity...
c1.width = x('.class2 > div').width; // Cannot be done in CSS/LESS/SASS :(
// It should fall back properly, of course, or give error if that property is not found
x('.class3').set( c1.deepCopy() ); // Bringing in nested selectors
x('.class4').set( c1.copy() ); // Only copying properties
// Introspection! F**k yeah!
c1.forEachProperty( function(property){ ... } );
c1.forEachChild( function(selector){ ... } );
c1.forEachDescendant( function(selector){ ... } );
x.forEachElement( function(selector){ ... } );
var c1Rule = c1.generate(); // Generating the CSS rule for a specific selector
x.delete('.class1'); // We no longer need/want '.class1' in our stylesheet
x.deepDelete('.class1'); // Removing also its nested selectors
// Let's now generate our final stylesheet.
// The 'generate' function might take care of optimizing the stylesheet.
var stylesheet = x.generate();
Tl; dr: Mi piacerebbe gestire un foglio di stile come se fosse un database interrogabile da un vero linguaggio di programmazione.
Ora, mi chiedo:
- C'è qualcuno per generare CSS simile a questa idea?
- Pensi che un simile approccio possa funzionare?
- Quali svantaggi avrebbe questo approccio rispetto a CSS / SASS / LESS?