Maison > Article > interface Web > Que sont les modules CSS ? Découvrons-le ensemble !
J'ai interviewé une entreprise en avril de cette année
Lors de l'entretien technique, on m'a demandé si j'avais compris le module CSS. 🎜>
Il a continué à demander : que devez-vous faire lorsque vous donnez des noms de classe à des composants et des éléments au cours d'un développement normal ? J'ai dit d'ajouter des préfixes spécifiques aux éléments et composants, afin de garantir que les noms de classe écrits par vous n'entreront pas en conflit avec les noms de classe écrits par d'autres collègues.
Tutoriel vidéo CSS]
Regardons d'abord une image : Une image pour comprendre le principe de fonctionnement des modules CSS :
Lorsque nous avons codé nous-mêmes, nous avions deux fichiers, l'un était le fichier ProductList.less et l'autre était le fichier ProductList.jsx
Après la construction, le fichier le moins sera converti en le fichier avec le titre bleu .
.title { color: red; } :global(.title) { color: green; }Lorsque vous citez :
<App className={styles.title} /> // red <App className="title" /> // greenclassnames PackageDans certains scénarios complexes, un élément peut correspondre à plusieurs noms de classe, et chaque nom de classe détermine s'il doit apparaître en fonction de certaines conditions. À l’heure actuelle, la bibliothèque de noms de classes est très utile.
import classnames from 'classnames'; const App = (props) => { const cls = classnames({ btn: true, btnLarge: props.type === 'submit', btnSmall: props.type === 'edit', }); return <div className={ cls } />; }De cette façon, si différents types sont transmis au composant App, différentes combinaisons de noms de classe seront renvoyées :
<App type="submit" /> // btn btnLarge <App type="edit" /> // btn btnSmallPour plus de connaissances liées à la programmation, veuillez visiter :
Enseignement de la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!