J'ai trois composants identiques: un carrousel de produits suggérés, un carrousel de produits avec remise, un carrousel de produits phares. Ces composants ont un tas de styles CSS qui leur sont appliqués. Bien sûr, ces classes css sont presque identiques. Dois-je répéter le css sur chaque composant ou dois-je placer les classes partagées sur le global styles.scss. Quelle est la meilleure pratique? Si vous utilisez le global styles.scss, j'évite les répétitions et je peux appliquer des modifications aux composants en un seul endroit. Mais que diriez-vous si vous souhaitez utiliser le composant dans un autre projet. Je devrais choisir toutes les classes du fichier styles.scss. Encore une fois, quelle est la meilleure pratique?
4 Réponses :
Les styles de composants sont utilisés pour encapsuler le style.
Une fois compilé, votre style, tel que
.myClass[ng_contentc0] { color: blue; }
devient
.myClass { color: blue; }
Ce ng_contentc0 code > est un attribut qui est ajouté dynamiquement à chaque balise HTML de votre composant. Cela empêche vos classes d'entrer en collision d'un composant à un autre.
Lorsque vous utilisez la feuille de style globale, généralement styles. [ext] , vous créez simplement un style global: chaque balise ayant la classe aura le style.
Dans votre cas, vous ne devez utiliser ni l'un ni l'autre: vous devriez
carousel.scss ou autre styleUrls (qui est un tableau) Avec cette technique, vous créez une feuille de style encapsulée, que vous pouvez utiliser sur plusieurs composants, et qui n'entrera en conflit avec aucun style CSS externe que vous auriez pu créer / installer.
Je ne pense pas qu'il y ait une meilleure pratique, ce qui fonctionne pour vous est le mieux.
Les petits projets ne se soucient généralement pas beaucoup de ceux-ci, si cela fonctionne, c'est bien.
Les grands projets ont souvent du mal à faire évoluer le CSS, atteignent tôt ou tard un goulot d'étranglement en termes de style et tout changement brise tout. La mise à l'échelle du CSS a de nombreuses approches.
Vous pouvez utiliser BEM, SMACSS, etc. et vous aider à gérer facilement votre CSS.
Une autre approche CSS basée sur les composants est le CSS à portée , c'est exactement ce que vous faites lorsque vous écrivez du CSS dans un fichier de composant dans Angular car angular fait sa propre portée polyfilled. (Ne devrait pas utiliser / deep / )
Ces composants ont un tas de styles css qui leur sont appliqués. Bien sûr que ces classes css sont presque identiques
Vous devrez probablement réimaginer la granularité de vos composants ou utiliser des mixins, l'héritage, etc. dans sass pour gérer vos fonctionnalités
identiquesAVERTISSEMENT: je ne suis pas un expert en CSS.
Je pense que la vraie question ici est de savoir pourquoi vous avez trois composants identiques. Peut-être qu'une meilleure option serait de n'avoir qu'un seul composant implémenté de manière plus générique ou peut-être d'avoir un composant qui contient trois composants qui font la différence.
Le global styles.scss est pour l'ensemble de l'application, donc les styles qui sont vraiment spécifiques aux composants doivent plutôt être placés à l'intérieur des composants, les composants dupliqués entraînent un code dupliqué (qui inclut scss) donc vous devriez essayer d'éviter cela.
/ p>
La meilleure solution à ce problème est encapsulation: ViewEncapsulation.None qui ajoutera votre style dans votre section de style global.
Vous pouvez donc directement copier-coller votre composant dans n'importe quel projet. Cela fonctionnera comme du charme.
Voici un exemple: -
your.component.ts
import {ViewEncapsulation} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-zippy',
templateUrl: 'my-zippy.component.html',
styles: [`
.zippy {
background: green;
}
`],
encapsulation: ViewEncapsulation.None
})
class ZippyComponent {
@Input() title: string;
}
J'espère que cela vous aidera