UpperCamelCase est une convention de nommage en programmation dans laquelle tous les mots commencent par une majuscule, y compris le premier, sans espace ni séparateur. Exemple : UserProfile, ShoppingCart, CalculerPrixTotal.
UpperCamelCase et PascalCase désignent exactement la même convention — ce sont des synonymes stricts. La différence tient uniquement au contexte d’utilisation : UpperCamelCase est le terme préféré dans les documentations C#, TypeScript et les spécifications techniques ; PascalCase est le terme général utilisé dans les comparatifs de conventions de nommage.
En résumé : UpperCamelCase = PascalCase = même règle (ChaqueMot commence par une Majuscule). Si vous cherchez la convention opposée — premier mot en minuscule — c’est le lowerCamelCase.
UpperCamelCase vs lowerCamelCase : la distinction essentielle
| Convention | Règle | Exemple | Usage principal |
|---|---|---|---|
| UpperCamelCase (= PascalCase) | Tous les mots commencent par une majuscule, y compris le premier | UserProfile | Classes, types, composants React, interfaces TypeScript, enums |
| lowerCamelCase (= camelCase) | Premier mot en minuscule, mots suivants en majuscule initiale | userProfile | Variables, fonctions, méthodes, paramètres, propriétés d’objet |
La différence entre les deux tient à un seul caractère — la casse de la toute première lettre — mais elle est sémantiquement cruciale dans les langages sensibles à la casse comme C#, Java ou TypeScript : UserProfile et userProfile sont deux identifiants distincts.
Exemples d’UpperCamelCase par langage
C# — convention officielle Microsoft
Les C# Coding Conventions de Microsoft imposent l’UpperCamelCase (PascalCase) pour les classes, interfaces, enums, méthodes publiques, propriétés et événements :
// C# — UpperCamelCase pour tout ce qui est public
public class UserProfile
{
public string FirstName { get; set; }
public string LastName { get; set; }
public DateTime DateOfBirth { get; set; }
public string GetFullName()
{
return $"{FirstName} {LastName}";
}
}
// Interface — préfixe I + UpperCamelCase
public interface IProductRepository
{
Product GetById(int id);
IEnumerable<Product> GetAll();
}
// Enum
public enum OrderStatus
{
Pending,
Processing,
Shipped,
Delivered
}TypeScript — types, interfaces et classes
En TypeScript, l’UpperCamelCase est la convention pour les types, interfaces, classes et composants :
// TypeScript — UpperCamelCase pour types et interfaces
interface UserProfile {
firstName: string;
lastName: string;
dateOfBirth: Date;
}
type OrderStatus = 'Pending' | 'Processing' | 'Shipped' | 'Delivered';
class ShoppingCart {
private items: CartItem[] = [];
addItem(item: CartItem): void {
this.items.push(item);
}
getTotalPrice(): number {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}
// Contrast avec lowerCamelCase pour variables et fonctions
const userProfile: UserProfile = {
firstName: 'Marie',
lastName: 'Dupont',
dateOfBirth: new Date('1992-04-15')
};React — noms de composants
En React, tous les composants doivent être en UpperCamelCase (PascalCase) — c’est une contrainte technique : React distingue les composants (<ProductCard />) des éléments HTML natifs (<div>, <p>) par la casse de la première lettre :
// React — UpperCamelCase obligatoire pour les composants
function ProductCard({ product }: ProductCardProps) {
return (
<div className="product-card">
<ProductImage src={product.imageUrl} alt={product.name} />
<ProductTitle>{product.name}</ProductTitle>
<AddToCartButton productId={product.id} />
</div>
);
}
// ❌ INCORRECT — React traite ça comme une balise HTML inconnue
function productCard() { ... } // composant en lowerCamelCase = erreur ReactJava — classes et interfaces
// Java — UpperCamelCase pour classes, interfaces, enums
public class ProductRepository implements IRepository<Product> {
private List<Product> products = new ArrayList<>();
public Product findById(int id) {
return products.stream()
.filter(p -> p.getId() == id)
.findFirst()
.orElse(null);
}
}Comparatif complet des conventions de nommage
| Convention | Exemple | Règle | Langages / contextes |
|---|---|---|---|
| UpperCamelCase / PascalCase | UserProfile | Tous les mots en majuscule initiale | Classes, composants, types — C#, Java, TypeScript, React, Kotlin |
| lowerCamelCase / camelCase | userProfile | Premier mot en minuscule, suivants en majuscule initiale | Variables, fonctions, méthodes — JavaScript, TypeScript, Java, Kotlin |
| snake_case | user_profile | Tout en minuscules, underscores comme séparateurs | Python, Ruby, SQL, PHP — variables et fonctions |
| kebab-case | user-profile | Tout en minuscules, tirets comme séparateurs | CSS, HTML, URLs web — ne peut pas être variable JS (tiret = soustraction) |
| SCREAMING_SNAKE_CASE | USER_PROFILE | Tout en majuscules, underscores | Constantes — Java, C, C#, Python |
UpperCamelCase vs PascalCase : faut-il fusionner les deux fiches ?
Les deux termes étant des synonymes stricts, on pourrait se demander pourquoi les distinguer. La raison est pratique : les développeurs qui travaillent en C# ou TypeScript cherchent souvent “UpperCamelCase” dans la documentation de ces langages (la terminologie officielle Microsoft utilise “Pascal case”) ; ceux qui font des comparatifs généraux de conventions cherchent “PascalCase”. Les deux requêtes méritent une réponse claire.
La règle de différenciation dans un projet :
- Utilisez PascalCase quand vous discutez de conventions en général ou dans des contextes multi-langages
- Utilisez UpperCamelCase quand vous suivez les conventions officielles de C#, .NET ou TypeScript — ces documentations utilisent spécifiquement ce terme
Votre code respecte-t-il les conventions de nommage de votre stack ?
Des conventions de nommage cohérentes dans le code front-end impactent la maintenabilité, le SEO technique (URLs, classes CSS) et la qualité globale de votre site. Nos équipes interviennent sur des projets WordPress, React et WooCommerce.
FAQ — UpperCamelCase
Quelle différence entre UpperCamelCase et PascalCase ?
Aucune — UpperCamelCase et PascalCase sont des synonymes stricts. Les deux désignent la même règle : chaque mot commence par une majuscule, y compris le premier (UserProfile, ShoppingCart). UpperCamelCase est le terme utilisé dans les documentations officielles C# et TypeScript de Microsoft ; PascalCase est le terme général utilisé dans les comparatifs de conventions de nommage. Dans la pratique, les deux termes sont interchangeables.
Quelle différence entre UpperCamelCase et lowerCamelCase ?
La seule différence est la casse du premier mot : UpperCamelCase commence par une majuscule (UserProfile) ; lowerCamelCase commence par une minuscule (userProfile). Dans un projet C#, TypeScript ou Java : UpperCamelCase pour les classes, types, composants et méthodes publiques ; lowerCamelCase pour les variables, paramètres et méthodes privées. Les deux identifiants UserProfile et userProfile sont distincts dans ces langages sensibles à la casse.
Quand utiliser UpperCamelCase en C# ?
Les C# Coding Conventions de Microsoft imposent UpperCamelCase (PascalCase) pour : tous les noms de classes (UserProfile, OrderService) ; les noms d’interfaces (avec préfixe I : IUserRepository) ; les noms d’enums et leurs membres (OrderStatus.Pending) ; les propriétés publiques (FirstName, TotalPrice) ; les méthodes publiques (GetFullName(), CalculateTotal()) ; les événements. Le lowerCamelCase est utilisé pour les variables locales et paramètres privés.
Pourquoi React impose-t-il UpperCamelCase pour les composants ?
React distingue les composants personnalisés des éléments HTML natifs par la casse de la première lettre. <ProductCard /> (UpperCamelCase) est interprété comme un composant React ; <div> ou <p> (minuscules) sont des éléments HTML natifs. Si vous nommez un composant productCard (lowerCamelCase), React le traitera comme une balise HTML inconnue et ne le rendra pas correctement. C’est une contrainte technique, pas seulement stylistique.
Pour aller plus loin
- PascalCase — le synonyme général d’UpperCamelCase, avec exemples tous langages
- lowerCamelCase — la variante basse, pour variables et fonctions JavaScript / Java
- kebab-case — la convention CSS et URLs, incompatible avec JavaScript
- SEO technique — les conventions de nommage impactent les URLs et le code front-end
- Notre expertise e-commerce — développement WordPress et React avec des bases de code maintenables
