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.

Puis ça s'est arrêté, et on m'a posé beaucoup de questions sur les principes de React et des choses comme ça et j'ai réussi l'entretien.

Aujourd'hui, nous allons lui expliquer ce que sont les modules CSS, pour que ce soit plus clair.

[Tutoriel recommandé :

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 .

On peut le voir à partir de ceci :

la classe de boutons sera renommée ProductList_button_1FU0u après la construction. Button est le nom local et ProductList_button_1FU0u est le nom global.
• Vous pouvez utiliser des noms courts et descriptifs sans vous soucier des conflits de noms.

Ensuite, tout ce que vous avez à faire est d'écrire .button {…} dans le fichier css/less et de le référencer via styles.button dans le composant.

Définir le CSS global

Les modules CSS ont une portée locale par défaut. Si vous souhaitez déclarer une règle globale, vous pouvez utiliser la syntaxe :global.

Par exemple :

.title {
	color: red;
}
:global(.title) {
	color: green;
}

Lorsque vous citez :

<App className={styles.title} /> // red
<App className="title" />        // green

classnames Package

Dans 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 btnSmall

Pour 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!