Vente Modèles CSS

Vendre des templates CSS en tant que produit fini

Un template CSS est vendu comme un pack de styles : des variables, des classes de composants et des règles responsives que quelqu'un d'autre intégrera dans un projet que vous ne verrez jamais. Les acheteurs paient pour l'heure qu'ils gagnent lorsque trois variables sont modifiées et que l'ensemble s'adapte parfaitement à leur marque. Tout le reste n'a pour but que d'honorer cette promesse.

Une structure qui résiste à la réutilisation

Commencez par la couche de base. Les couleurs, les échelles d'espacement et la hiérarchie typographique doivent figurer dans un ensemble réduit de variables en haut de page, afin que le reste de la feuille de style s'y réfère au lieu de répéter des valeurs brutes. Les classes de composants se placent au-dessus de cette couche, et les variantes viennent en dernier pour modifier les composants sans les remplacer.

Ceux qui évaluent une feuille de style payante recherchent généralement les mêmes éléments :

1. Un bloc de variables suffisamment compact pour tenir sur un seul écran ;
2. Des classes de composants nommées d'après leur rôle, et non d'après l'endroit où elles sont apparues pour la première fois ;
3. Des états pour le survol, le focus et les erreurs sur chaque élément interactif ;
4. Des règles responsives regroupées par point d'arrêt au lieu d'être dispersées dans tout le fichier.

Personnaliser sans tout réécrire

Déterminez à l'avance les éléments que l'acheteur est censé modifier, puis rendez ces éléments évidents. Les noms jouent un rôle déterminant. Une classe nommée card se réutilise facilement ; une classe nommée promo-block-2 n'apprend rien à la personne suivante et finit pourtant par être copiée.

La portée est tout aussi essentielle que le nommage. Les règles globales qui s'étendent à l'ensemble du projet hôte finissent toujours par casser quelque chose ; séparez-les donc des règles de composants dont l'acheteur a réellement besoin.

Délimitez clairement la zone de personnalisation pour éliminer l'essentiel des demandes d'assistance :

1. Les couleurs de marque et les espacements sont définis par des variables, jamais par des sélecteurs isolés ;
2. Une pile de polices définie une seule fois, avec une police de secours fonctionnelle si la police principale ne se charge pas ;
3. Les variantes de composants s'ajoutent via une classe supplémentaire, ce qui préserve la règle de base.

Les signes de templates que personne ne veut maintenir

Le constat est bien connu : à l'ouverture, quarante sélecteurs sont rattachés à une mise en page spécifique, des surcharges entrent en conflit les unes avec les autres et des !important ont été semés dès que la cascade devenait contraignante. L'acheteur ne trouve aucun moyen de modifier la couleur du bouton sans déformer les cartes, et la demande de remboursement tombe le soir même.

Le poids des fichiers compte également. Ne fournissez que les règles qu'un projet utilise réellement ; l'option Exporter le CSS minimal par page dans Nicepage génère une sortie plus légère, maintenant ce que vous livrez au plus près des besoins de l'acheteur.

Le test décisif avant toute mise en vente : confiez la feuille de style à quelqu'un qui ne l'a jamais vue, demandez un changement de couleur et une nouvelle variante de carte, puis chronométrez. En moins de dix minutes, vous avez un produit ; en une heure, vous n'avez qu'une pièce de portfolio.