Pratiche per guardaboschi JavaScript e CSS in sincronia?

Question

sto lavorando su una grande Javascript-pesante app. Diversi pezzi di JavaScript sono alcune regole CSS correlati. La nostra pratica attuale è per ogni file JavaScript di avere un file CSS correlato opzionale , in questo modo:

MyComponent.js  // Adds CSS class "my-comp" to div
MyComponent.css // Defines .my-comp { color: green }

In questo modo So che tutti i CSS relative al MyComponent.js sarà in MyComponent.css.

Ma il fatto è che troppo spesso hanno ben poco CSS in questi file. E troppo spesso sento che è troppo sforzo per creare un intero file da solo contiene poche righe di CSS - sarebbe più facile per hardcode solo gli stili all'interno di JavaScript. Ma questo sarebbe il percorso verso il lato oscuro ...

Ultimamente ho pensato di incorporare il CSS direttamente all'interno JavaScript - in modo che possa ancora essere estratto nel processo di generazione e fuse in un unico file CSS di grandi dimensioni. In questo modo non avrebbe dovuto creare un nuovo file per ogni piccolo CSS pezzi. Inoltre quando mi muovo / rinominare / eliminare il file JavaScript non devo spostare in aggiunta / rinominare / eliminare il file CSS.

Ma come incorporare i CSS all'interno JavaScript? Nella maggior parte delle altre lingue vorrei solo usare stringa, ma JavaScript ha alcuni problemi con le stringhe multilinea. I seguenti sguardi IMHO abbastanza brutto:

Page.addCSS("\
  .my-comp > p {\
    font-weight: bold;\
    color: green;\
  }\
");

Quali altre pratiche hanno si per mantenere il vostro JavaScript e CSS in sincronia?

Answer 1

Il mio punto di vista su file CSS è che essi descrivono le regole che definiscono il tema di un'applicazione. Le migliori pratiche generalmente affermano che il contenuto, presentazione e comportamento devono essere tenuti in modo separato che è relativamente facile cambiare quel tema. Avendo più file CSS, questo diventa un po 'più difficile, come designer avrebbe più file da affrontare.

Inoltre, CSS (Cascading StyleSheets) le regole sono influenzati dalla loro posizione nel documento CSS. Avendo più file CSS con differenti regole di ciascuno, può diventare più difficile dare la priorità che le regole hanno la precedenza.

Infine, se si vuole scoprire cosa selettore CSS nelle vostre partite di file JS quali file CSS, provare a utilizzare uno strumento di ricerca fresco, come grep, se siete su Linux. Se stai usando un buon IDE, è possibile utilizzarlo anche per cercare rapidamente le regole, allora si può saltare solo al numero della linea. Ho davvero vedere alcun vantaggio nel mantenere le regole CSS in file diversi; sarà solo complicare le cose.

Inoltre, vorrei consigliare contro l'idea di mettere il CSS in linea. In questo modo, sarà inevitabilmente rendere più difficile per il vostro web designer a rapidamente e facilmente scambiare gli stili. Il punto di CSS esterno è così il vostro web designer può cambiare il tema o di fornire molteplici temi per i diversi utenti. Se si incorpora il CSS in JavaScript o HTML, hai quindi strettamente accoppiati il ??contenuto, il comportamento e la presentazione.

Le migliori pratiche generalmente suggeriscono di mantenere il contenuto, il comportamento e presentazione separata per questo scopo.

Answer 2

Avere file CSS uno per ogni file JS sembra una buona cosa per me. E 'pulito, e facile da capire e da mantenere. L'unico problema sarebbe quello di avere decine di file CSS su ogni pagina, ma suppongo che si combinano quei file ad un unico grande file, quindi questo problema non esiste nel tuo caso.

Come CSS incorporare in JavaScript? Essa dipende dall'ambiente che hai, e come il processo di compilazione è fatto. La cosa più semplice è quella di avere un grande commento all'inizio di ogni file JavaScript, qualcosa di simile a questo:

// <...>Your copyright notice here</...>

// <css>
/*
body{color:red;}
div{border:solid 10px lime;}
// ... other ugly styles.
*/
// </css>

Poi, durante la compilazione, è necessario cercare i blocchi <css>...</css> ed estrarre il CSS tagliando il /* e */.

Naturalmente, si crea un problema:. Se si utilizza un IDE con auto-completamento, incorporando i CSS in un file JavaScript renderà impossibile l'uso completamento automatico in questo caso

Answer 3

Il mio metodo preferito è quello di mantenere tutti i file CSS separano e poi hanno un processo di generazione che li compila in un file CSS più grande su distribuzione.

vorrei evitare la fusione le vostre JS con il CSS. Può suonare come una soluzione più pulita dal livello di file, penso che otterrà veloce disordinato. Questo, e perderai l'assistenza evidenziazione della sintassi e il vostro editor ti dà.

Answer 4

Csster . L'ho scritto per risolvere proprio questo problema.

Si incorpora le regole CSS direttamente in Javascript, utilizzando la sintassi letterale oggetto Javascript. Non è più brutto di grezzo CSS.

Csster.style({
  h1: {
    fontSize: 18,
    color: 'red'
  }
});

Le regole vengono inseriti nel DOM sul lato client. Questa architettura semplifica il processo di compilazione e riduce le richieste dei client.

Si può usare come lei descrive, ma Csster fornisce anche un paio di altre sottigliezze:

• nidificazione per asciugare i fogli di stile
• funzioni di colore come darken e saturate
• built-in macro per idiomi comuni CSS come clearfix, angoli arrotondati, ombre.
• punti di estensione per un comportamento personalizzato o il supporto cross-browser

E 'ben testato e ho usato su un bel paio di progetti. È indipendente di jQuery, ma gioca bene con esso.

Mi piacerebbe avere più persone lo usano e fornire un feedback.