Existe-t-il un modèle standard pour CSS dans les modèles EJS?

Question

J'ai donc récemment commencé à utiliser davantage les modèles EJS sur mon site Web et j'ai donc fait des choses comme la barre de navigation supérieure et d'autres choses dans leur propre modèle. Existe-t-il une pratique standard pour organiser CSS (ou plus spécifiquement SCSS) avec cela? Devrais-je simplement faire un SCSS correspondant pour chaque modèle avec seulement les styles pour ce modèle et ajouter le <link/> dans chaque page qui utilise le modèle? Ou juste je viens d'ajouter <style/> étiquettes au modèle lui-même avec le CSS là-bas. Existe-t-il un modèle standard pour cela?

Answer 1

Bonne question. Je pense que la réponse est «non», il n'y a pas de norme universellement acceptée ou acceptée.

Le conseil que me donne toujours mon «mentorat» est un bon conseil: il dit «fais ce qui sera le plus facile à entretenir». Cela dépend de votre projet. Je peux penser à un couple de stratégies générales:

Un stylesheet par modèle

C'est, en quelque sorte, la suggestion la plus simple. Probablement le plus facile à développer, et chaque page apportera les styles minimum requis. Cependant, cela rend la réutilisation des styles pratiquement impossible. Vous ne pourrez pas ajouter <button class="myclass"> dans un modèle sans renfermer les styles pour .myclass dans chaque feuille dont vous avez besoin. De plus, si vous voulez automatiser vos feuilles de style (les réduire ou les concaténer pour la production, etc.) C'est une pratique courante, ce ne sera pas très possible d'ici. Un autre inconvénient, vous pourriez avoir des effets de commande inattendus. Comme si votre "widget.css" finissait par être ajouté au DOM après votre "article.css", il peut remplacer les styles d'une manière différente de ce qu'il aurait été s'il avait apparu plus tôt dans le DOM.

Tous les styles sur chaque page

Encore une fois, cela est agréable et simple. Chaque page contient toutes les feuilles de style (ou peut-être une seule feuille géante). Vous pouvez lier une fois dans votre modèle de mise en page externe. Il sera facile d'automatiser la minification, etc., et il n'y aura jamais de surprises liées aux feuilles de style de commande.

L'inconvénient évident est que beaucoup de styles inutilisés sont apportés à chaque page. Mais css est assez "cheap" en termes de taille, donc ce n'est peut-être pas un si mauvais inconvénient.

Quelque part entre

Inclure des styles sur chaque page, et faire quelques soit la page spécifique ou spécifique modèle. De manière réaliste, c'est probablement ce que la plupart des applications finissent par faire.

Vous pouvez universellement inclure des styles d'utilitaires destinés à être réutilisés (ex button.bigred, form.orderform, etc.), ainsi que des dépendances telles que bootstrap ou autre. Je vous conseille également d'inclure tous les styles dont vous aurez besoin sur plus de la moitié de vos pages (ex styles pour votre barre de navigation).

D'autres styles destinés à une page spécifique peuvent être ajoutés directement à cette page via des liens.

dernière note

J'essaie d'éviter <style> balises dans le code html pour deux raisons:

• Beaucoup de bibliothèques js ajouter dynamiquement ou supprimer <style> balises à votre DOM, laissant ainsi que espace clair pour eux évite les erreurs ou les chevauchements possibles.
• Ils constituent un bon moyen d'ajouter des styles dynamiques ou gérés par l'utilisateur aux pages à partir de vos modèles. Gardez les styles qui ne changent pas dans les feuilles de style, afin d'éviter d'éventuelles erreurs ou les chevauchements avec vous-même :)