2014 : une réponse nouvelle, axée sur les systèmes de dénomination existants
Quelle que soit la convention que vous choisissez, je vous suggère de choisir des exigences qui ciblent les besoins de votre projet.
À savoir : votre projet est-il petit ou énorme ? Votre projet va-t-il être réutilisé ou doit-il gérer une sorte de thématisation ? Les développeurs qui travaillent sur les CSS/HTML sont-ils suffisamment enthousiastes ou expérimentés pour respecter les conventions ? etc.
Exigences communes :
- la dénomination de gauche à droite, du plus générique au plus précis, telle que comme
btn-bluetheme-create-accnt o accordion-modrnlook-userlist
- le nom d'une classe ou d'un identifiant doit toujours être suffisamment précis pour être recherché dans l'ensemble d'un projet et ne renvoyer que les résultats pertinents.
- les noms doivent être intuitifs et significatifs
- n'abrégez PAS les noms, sauf s'il s'agit d'une abréviation très connue (par exemple, msg pour message, accnt pour compte).
- permettre une hiérarchie structurelle (c'est-à-dire la convention BEM)
- utiliser
- o _ ou camelCase dans les noms ? probablement subjectif (opinion des développeurs) et dépendant des langues de clavier utilisées
Comme nous l'avons vu, vous pouvez envisager d'utiliser Structural naming convention OU/ET Presentational naming convention (ou peaux). Je préférerais l'aspect structurel dans l'ensemble, mais il y a toujours des cas où cela est nécessaire (par exemple, il n'est pas rare d'utiliser différents styles de boutons sur un même site web et il peut être pratique/tentant de les nommer comme suit btn-dark & btn-light ).
Conventions connues :
Convention de dénomination structurelle : nomme la classe de l'élément en décrivant ce qu'il est, plutôt que de dire où il se trouve ou à quoi il ressemble. Voir les exemples ci-dessous.
.page-container
.page-wrap-header-n-content
.page-header
.branding-logo
.branding-tagline
.wrapper-search
.page-nav-main
.page-main-content
.page-secondary-content
.nav-supplementary
.page-footer
.site-info
Convention de dénomination de présentation : nomme la classe de l'élément en décrivant son emplacement et/ou son apparence. Voir les exemples ci-dessous.
.theme-ocean-blue
.skin-red-tango
Convention de dénomination BEM : signifie "Bloc, élément, modificateur". La syntaxe est telle que <module-name>__<sub-module-name>--<modifier-or-state> . Le bloc est le conteneur "principal", une sorte de module/composant, quel que soit le nom qu'on lui donne. Element est juste un composant enfant du composant principal (le Block). Modifier est une sorte d'état. Particularités : la syntaxe (utilisation de dbl underscore & dbl dash), & les éléments enfants doivent contenir le nom du composant le plus proche.
Convention de dénomination de l'OCSS : signifie CSS orienté objet. Utilise des skins à des fins de stratégie de marque ou de cohérence de la conception (par exemple, couleur du fond, couleur de la bordure, ...). Abstraite les styles structurels. Et plus encore (je dois encore me pencher sur cette convention moi-même). Exemple de style structurel abstrait ci-dessous.
.globalwidth {
width: 980px; /* fixed width */
margin: 0 auto; /* Centering using margin: auto */
position: relative; /* Relative positioning to create a positioning context for child elements */
padding-left: 20px;
padding-right: 20px;
overflow: hidden; /* Overflow set to "hidden" for clearfixing */
}
Ressources :
