Comment optimiser le stylisme CSS avec Claude Code

Les situations où Claude Code excelle en stylisme CSS

L’implémentation CSS à partir de maquettes, l’adaptation responsive, le support du mode sombre - le travail de stylisme est chronophage. Claude Code comprend l’intention du design et peut générer efficacement les styles.

Génération de composants Tailwind CSS

> Crée le composant carte suivant avec Tailwind CSS :
> - Image, titre, description, tags, date de publication
> - Animation d'ombre renforcée au survol
> - Support du mode sombre
> - Responsive mobile

function BlogCard({ post }: { post: Post }) {
  return (
    <article className="group rounded-xl overflow-hidden border border-gray-200
      bg-white shadow-sm transition-shadow duration-300 hover:shadow-lg
      dark:border-gray-700 dark:bg-gray-800">

      <div className="aspect-video overflow-hidden">
        <img
          src={post.image}
          alt={post.title}
          className="h-full w-full object-cover transition-transform
            duration-300 group-hover:scale-105"
        />
      </div>

      <div className="p-4 sm:p-6">
        <div className="mb-2 flex flex-wrap gap-2">
          {post.tags.map(tag => (
            <span key={tag} className="rounded-full bg-blue-100 px-2.5 py-0.5
              text-xs font-medium text-blue-800
              dark:bg-blue-900 dark:text-blue-200">
              {tag}
            </span>
          ))}
        </div>

        <h2 className="mb-2 text-lg font-bold text-gray-900
          line-clamp-2 dark:text-white sm:text-xl">
          {post.title}
        </h2>

        <p className="mb-4 text-sm text-gray-600 line-clamp-3
          dark:text-gray-300">
          {post.description}
        </p>

        <time className="text-xs text-gray-500 dark:text-gray-400">
          {new Date(post.date).toLocaleDateString('fr-FR')}
        </time>
      </div>
    </article>
  );
}

Génération d’animations CSS

> Crée un spinner de chargement avec une animation CSS.
> Combine les utilitaires Tailwind et des animations personnalisées.

/* Animations personnalisées à ajouter dans tailwind.config.js */
@layer utilities {
  @keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
  }

  .animate-spinner {
    animation: spinner 1s linear infinite;
  }

  .animate-pulse-ring {
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
}

function LoadingSpinner({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
  const sizeClasses = {
    sm: 'h-5 w-5 border-2',
    md: 'h-8 w-8 border-3',
    lg: 'h-12 w-12 border-4',
  };

  return (
    <div className="flex items-center justify-center">
      <div className={`${sizeClasses[size]} animate-spinner rounded-full
        border-gray-300 border-t-blue-600
        dark:border-gray-600 dark:border-t-blue-400`}
      />
    </div>
  );
}

Refactoring de styles existants

> Analyse les fichiers CSS dans src/styles/,
> mutualise les styles dupliqués.
> Identifie et supprime les classes CSS inutilisées.

Claude Code analyse l’ensemble des CSS du projet et propose la consolidation des patrons dupliqués et la suppression des classes inutiles.

Adaptation responsive globale

> Vérifie l'adaptation responsive de tous les composants de page.
> Confirme qu'il n'y a pas de problème de 320px à 1440px, et corrige les points nécessaires.

// Exemple de mise en page grille responsive
function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-1 gap-4
      sm:grid-cols-2 sm:gap-6
      lg:grid-cols-3
      xl:grid-cols-4 xl:gap-8">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Implémentation du mode sombre

> Ajoute le mode sombre à l'ensemble du projet.
> Suit les paramètres système et permet le basculement manuel par l'utilisateur.

// hooks/useTheme.ts
import { useEffect, useState } from 'react';

type Theme = 'light' | 'dark' | 'system';

export function useTheme() {
  const [theme, setTheme] = useState<Theme>(() => {
    return (localStorage.getItem('theme') as Theme) || 'system';
  });

  useEffect(() => {
    const root = document.documentElement;
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');

    function applyTheme() {
      const isDark = theme === 'dark' ||
        (theme === 'system' && systemDark.matches);
      root.classList.toggle('dark', isDark);
    }

    applyTheme();
    systemDark.addEventListener('change', applyTheme);
    localStorage.setItem('theme', theme);

    return () => systemDark.removeEventListener('change', applyTheme);
  }, [theme]);

  return { theme, setTheme };
}

Résumé

En utilisant Claude Code, vous pouvez considérablement accélérer le travail CSS, du stylisme des composants à l’adaptation responsive et l’implémentation du mode sombre. L’astuce est de communiquer les exigences de design de manière concrète dans le prompt. Pour des techniques efficaces de rédaction de prompts, consultez le guide complet des techniques de prompt. Inscrire les conventions de stylisme dans CLAUDE.md permet de maintenir la cohérence.

Pour plus de détails, consultez la documentation officielle d’Anthropic et le site officiel de Tailwind CSS.