Comprendre la méthodologie des modules CSS

Modules CSS: un outil puissant pour CSS composé

Cet article introduira les modules CSS, un moyen efficace de résoudre les conflits d'espace de noms global CSS et de simplifier la dénomination des composants. Il nécessite un certain processus de configuration et de construction, généralement utilisé comme plug-in pour WebPack ou de navigation, et ne fonctionne pas indépendamment.

Avantages de base:

• Portée locale: Les modules CSS limitent la portée CSS aux composants par défaut par défaut pour éviter les conflits de dénomination globaux.
• dénomination dynamique: Le processus de construction générera un nom de classe dynamique unique, le mappera au style correspondant, réduira les conflits de dénomination et améliorera la modularité.
• Évolutivité: prend en charge la définition des classes globales et l'extension des styles d'autres modules pour améliorer la réutilisabilité du code et la maintenabilité.

Principe de travail:

Les modules

CSS sont implémentés en important des fichiers CSS dans des modules JavaScript tels que les composants React. Il crée un objet qui mappe les noms de classe définis dans le fichier CSS à des noms de classe de classement générés dynamiquement. Ces noms de classe sont utilisés comme chaînes en JavaScript.

par exemple, un fichier CSS simple:

<code class="language-css">.base {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}</code>

Utilisation dans les composants JavaScript:

<code class="language-javascript">import styles from './styles.css';

element.innerHTML = `<div class="${styles.base}">CSS Modules真有趣！</div>`;</code>

webpack peut générer après compilation:

<code class="language-html"><div class="_20WEds96_Ee1ra54-24ePy">CSS Modules真有趣！</div></code>

<code class="language-css">._20WEds96_Ee1ra54-24ePy {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}</code>

La génération de noms de classe est configurable, mais la clé est qu'elles sont générées dynamiquement, uniques et cartographiques au bon style.

Questions fréquemment posées:

• Le nom de classe est laid: Le nom de classe n'est pas pour le bien de l'esthétique, mais pour l'application des styles, ce n'est donc pas un problème.
• difficulté de débogage: Vous pouvez utiliser la carte source pour le débogage. Parce que la portée du style est claire, le débogage est relativement facile.
• Mauvaise réutilisabilité du style: Les modules CSS sont conçus pour éviter les conflits de style mondial, mais ils peuvent toujours élargir les styles en définissant des classes globales ou :global() Mots-clés pour améliorer la réutilisabilité. composes

<code class="language-css">:global(.clearfix::after) {
  content: '';
  clear: both;
  display: table;
}

.base {
  composes: appearance from '../AnotherModule/styles.css';
}</code>

• Dépensez aux outils de construction: Ceci est similaire à SASS ou POSTCSS, où les étapes de construction sont nécessaires.

débutant:

Des outils de construction tels que WebPack ou Browserify sont nécessaires.

Configuration WebPack:

Ajouter à

: webpack.config.js

<code class="language-javascript">{
  test: /\.css$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true } }
  ]
}</code>

Pour générer un fichier CSS séparé, vous pouvez utiliser

: MiniCssExtractPlugin

<code class="language-javascript">const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ... other configurations
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { modules: true } }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};</code>

Browserify Configuration (Exemple):

Ajouter le script NPM dans

: package.json

<code class="language-json">{
  "scripts": {
    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  }
}</code>

Résumé: Les modules

CSS fournissent une méthode de rédaction CSS durable, modulaire, bien spécialisée et réutilisable, en particulier pour les grands projets.

FAQ:

• Avantages: Évitez les conflits de nom de classe, améliorez la réutilisabilité et la maintenabilité des composants et les combinaisons de style de soutien.
• Implémentation: Configurer WebPack ou Browserify, utilisez l'extension .module.css.
• Style global: Utiliser :global().
• Combinaison de style: Utilisez le mot-clé composes.
• Compatible avec la compatibilité REACT: .
• Différences par rapport aux CSS traditionnels: Différentes portées sont différentes, les modules CSS traditionnels dans le monde, CSS localement.
• Compatible avec Sass / moins: , nécessitant une configuration supplémentaire.
• débogage: Utiliser la carte source.
• Limitations: Des outils de construction sont requis, une configuration supplémentaire peut être nécessaire pour prendre en charge les requêtes multimédias, etc.
• Rendu côté serveur: Une configuration supplémentaire est requise.

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!