Gestione di fogli di stile da un vero linguaggio di programmazione

1

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?
posta peoro 12.07.2014 - 14:34
fonte

2 risposte

1

Is there any to generate CSS similar to this idea?

Ci sono stati alcuni progressi con il concetto di CSS- IN-JS . Non è necessario creare il proprio strumento per generare css in quanto vi sono dozzine disponibili.

Do you think such an approach would work?

Lo farà, sottoposto ad alcuni compromessi.

  1. Lo stile di lavoro sarà diverso, specialmente se lavori con altri sviluppatori estranei all'idea di CSS in JS, richiederà molto tempo prima di apprezzare e in secondo luogo raccogliere qualcosa come link . Questo potrebbe influenzare anche la possibilità di noleggio e l'onboarding.

  2. Anche l'integrazione con framework o librerie esistenti potrebbe essere un problema. Ad esempio, se la tua azienda ha un foglio di stile globale scritto in SASS e vuoi includere alcuni di questi moduli SASS nel tuo framework CSS IN preferito, potrebbe essere necessario scrivere degli strumenti extra per unire i due insieme.

  3. Gli strumenti esistenti potrebbero non funzionare. Dovrai anche indagare e vedere se gli strumenti esistenti che funzionano su fogli di stile come autoprefixer (che funziona su fogli di stile) funzioneranno su CSS-IN-JS. La preoccupazione è che gli stili generati non funzionano in un'impostazione cross-browser.

  4. Inoltre, considera l'impatto che il passaggio di compilazione aggiuntivo (CSS-IN-JS ai fogli di stile grezzi) ti costa in termini di tempo di generazione della pipeline.

What disadvantages would this approach have with respect to CSS/SASS/LESS?

Vedi i compromessi sopra.

    
risposta data 14.08.2018 - 08:54
fonte
0

I'd like to handle a stylesheet as if it was a database queryable from a real programming language.

Esiste implementazione Java di quanto segue:

SAC ha anche un'implementazione C

Riferimenti

risposta data 15.08.2018 - 17:09
fonte

Leggi altre domande sui tag