Pratiques pour la tenue JavaScript et CSS dans la synchronisation?

Question

Je travaille sur une grande application JavaScript lourd. Plusieurs morceaux de JavaScript ont des règles CSS connexes. Notre pratique actuelle est pour chaque fichier JavaScript pour avoir un fichier CSS en option associée , comme ceci:

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

De cette façon, je sais que tous les CSS liés à MyComponent.js sera MyComponent.css.

Mais la chose est, j'ai trop souvent très peu de CSS dans ces fichiers. Et trop souvent, je pense qu'il est trop d'efforts pour créer un fichier entier juste contient quelques lignes de CSS - il serait plus facile de coder en dur les styles à l'intérieur JavaScript. Mais ce serait le chemin du côté sombre ...

Dernièrement, j'ai pensé à intégrant le CSS directement dans JavaScript - il pourrait encore être extrait dans le processus de construction et a fusionné dans un grand fichier CSS. De cette façon, je ne serais pas devoir créer un nouveau fichier pour chaque petite CSS pièce. De plus, quand je déplacer / renommer / supprimer le fichier JavaScript Je n'ai pas déplacer plus / renommer / supprimer le fichier CSS.

Mais comment intégrer CSS JavaScript à l'intérieur? Dans la plupart des autres langues que je voudrais simplement utiliser la chaîne, mais JavaScript a quelques problèmes avec les chaînes multilignes. Les regards suivants à mon humble avis assez laid:

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

Quelles autres pratiques avez-vous pour garder votre JavaScript et CSS dans la synchronisation?

Answer 1

Mon point de vue sur les fichiers CSS est qu'ils décrivent les règles qui définissent le thème d'une application. Les meilleures pratiques indiquent généralement que le contenu, la présentation et le comportement doivent être conservés de façon séparée qu'il est relativement facile de changer ce thème. En ayant plusieurs fichiers CSS, cela devient un peu plus difficile, en tant que concepteur aurait plus de dossiers à traiter.

En outre, CSS (Cascading StyleSheets) les règles sont affectées par leur position dans le document CSS. En ayant plusieurs fichiers CSS avec des règles différentes dans chaque, il peut devenir plus difficile d'établir des priorités dont les règles ont priorité.

Enfin, si vous voulez savoir ce sélecteur CSS dans vos résultats de fichier JS quel fichier CSS, essayez d'utiliser un outil de recherche de cool, comme grep, si vous êtes sur linux. Si vous utilisez un bon IDE, vous pouvez également l'utiliser pour rechercher rapidement les règles, alors vous pouvez simplement sauter au numéro de ligne. Je ne vois vraiment pas d'avantage à garder les règles CSS dans différents fichiers; il ne fera que compliquer les choses.

De plus, je conseillerais contre l'idée de mettre la ligne CSS. En faisant cela, vous allez inévitablement rendre plus difficile pour votre concepteur Web pour échanger rapidement et facilement les styles. Le point entier de CSS externe est si votre concepteur web peut changer le thème ou fournir plusieurs thèmes pour différents utilisateurs. Si vous intégrez le CSS dans le JavaScript ou HTML, vous avez alors le contenu étroitement associé, le comportement et la présentation.

Les meilleures pratiques suggèrent généralement le contenu de maintien, le comportement et la présentation séparée dans ce but.

Answer 2

Avoir un fichier CSS par fichier JS semble une bonne chose pour moi. Il est propre et facile à comprendre et à maintenir. Le seul problème serait d'avoir des dizaines de fichiers CSS sur chaque page, mais je suppose que vous combinez ces fichiers dans un seul gros fichier, si ce problème n'existe pas dans votre cas.

Comment intégrer CSS JavaScript? Cela dépend de l'environnement que vous avez, et comment le processus de construction est fait. La meilleure chose est d'avoir un grand commentaire au début de chaque fichier JavaScript, quelque chose comme ceci:

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

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

Ensuite, lors de la construction, vous devez rechercher des blocs de <css>...</css> et extraire le CSS en taillant la /* et */.

Bien sûr, cela crée un problème. Si vous utilisez un IDE avec auto-complétion, l'intégration CSS dans un fichier JavaScript, il sera impossible d'utiliser l'auto-complétion dans ce cas

Answer 3

Ma méthode préférée est de garder tous les fichiers CSS séparés et un processus de construction qui les compile dans un fichier CSS plus sur le déploiement.

Je voudrais éviter de fusionner vos JS avec votre CSS. Cela peut sembler une solution de nettoyage à partir du niveau fichier, je pense que ça va obtenir rapidement en désordre. Cela, et vous perdrez l'aide et syntaxe votre éditeur vous donne.

Answer 4

Consultez Csster . Je l'ai écrit pour résoudre tout ce problème.

Vous intégrez vos règles CSS directement dans votre Javascript, en utilisant la syntaxe Javascript objet littérale. Il n'y a pas plus laid que CSS brut.

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

Les règles sont insérés dans le DOM du côté du client. Cette architecture simplifie votre processus de construction et réduit les demandes des clients.

Vous pouvez l'utiliser comme vous décrivez, mais Csster fournit également quelques autres subtilités:

• nicher à tarir les feuilles de style
• Fonctions de couleur comme darken et saturate
• intégré des macros pour idiomes CSS communs comme clearfix, coins arrondis, des ombres portées.
• points d'extension pour un comportement personnalisé ou un support multi-navigateur

Il est bien testé et je l'ai utilisé sur un bon nombre de projets. Il est indépendant de jQuery, mais joue bien avec elle.

J'aimerais avoir plus de gens l'utilisent et formuler des commentaires.