Convention de dénomination des classes CSS

Question

Sur une page web, il y a deux blocs de contrôles (primaire et secondaire), quels noms de classe la plupart des gens utiliseraient-ils ?

Choix 1 :

<div class="primary controls">
 <button type="button">Create</button>
</div>

<div class="secondary controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Choix 2 :

<div class="primary-controls controls">
 <button type="button">Create</button>
</div>

<div class="secondary-controls controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Answer 1

La réponse directe à la question est juste en dessous de celui-ci par Curt.

Si vous vous intéressez aux conventions de dénomination des classes CSS, je vous suggère de considérer une convention très utile nommée BEM ( Bloc, élément, modificateur ).

UPDATE

Pour en savoir plus, cliquez ici. http://getbem.com/naming/ - il s'agit d'une version plus récente qui rend la réponse suivante obsolète.

---

Les grands principes :

• Une page est construite à partir de blocs indépendants. Un bloc est un élément HTML dont le nom de classe a un préfixe "b-", comme "b-page" ou "b-login-block" ou "b-controls".

• Tous les sélecteurs CSS sont basés sur des blocs. Il ne devrait pas y avoir de sélecteurs qui ne commencent pas par "b-".

Bien :

.b-controls .super-control { ... }

Mauvais :

.super-control { ... }

• Si vous avez besoin d'un autre bloc (sur une autre page peut-être) qui est similaire au bloc que vous avez déjà, vous devez ajouter un modificateur à votre bloc au lieu d'en créer un nouveau.

Exemple :

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Avec modificateur :

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

Vous pouvez ensuite spécifier toute modification dans le CSS :

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

Si vous avez des questions, je serai heureux d'en discuter avec vous. J'ai utilisé BEM depuis deux ans et j'affirme que c'est la meilleure convention que j'ai jamais rencontrée.

Answer 2

Je choisirais :

<div class="controls primary">
 <button type="button">Create</button>
</div>

<div class="controls secondary">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Tant que votre CSS est structuré correctement, primary y secondary ne doit pas entrer en conflit avec d'autres éléments de votre candidature :

.controls.primary {}

Remarquez que j'ai aussi mis controls devant primary / secondary dans le code car c'est votre classe principale.

Je pense que la première série ci-dessous est beaucoup plus lisible que la seconde :

.controls.primary {}
.controls.secondary {}

.primary.controls {}
.secondary.controls {}

Answer 3

Il existe une excellente alternative appelée NCSS .

Named Cascading Style Sheets est une convention de dénomination et une ligne directrice pour les CSS sémantique.

Pourquoi ?

Les CSS massifs étaient autrefois un cauchemar lorsqu'on travaillait sur des projets avec différents types de développeurs. L'absence de conventions et de lignes directrices va conduire à une boule de boue impossible à maintenir.

Objectif :

Une grammaire prévisible pour CSS qui fournit des informations sémantiques sur le modèle HTML.

• Quelles balises, composants et sections sont concernés
• Quelle est la relation d'une classe à une autre

Cours :

Les feuilles de style en cascade nommées sont divisées en :

• Espaces de noms
• Classes structurelles
• Classes de composants
• Classes de type
• Classes de modificateurs
• Classes fonctionnelles
• Exceptions

Pour en savoir plus : https://ncss.io/documentation/classes

Exemples :

<!-- header -->

<header id="header" class="foo-header"> 
    <h1 class="foo-title-header">Website</h1>
</header>

<!-- main -->

<main class="foo-main foo-wrapper">

    <!-- content -->

    <article id="content" class="foo-content">
        <h2 class="foo-title-content">Headline</h2>
        <div class="foo-box-content">Box</div>
    </article>

    <!-- sidebar -->

    <aside id="sidebar" class="foo-sidebar">
        <h3 class="foo-title-sidebar">Headline</h3>
        <p class="foo-text-sidebar">Text</p>
    </aside>

</main>

<!-- footer -->

<footer id="footer" class="foo-footer">
    <div class="foo-box-footer">Powered by NCSS</div>
</footer>

Pour en savoir plus : https://ncss.io/documentation/examples

Outils :

Installation :

npm install ncss-linter

Valider une chaîne HTML :

bin/ncss-linter --html='<div class="box-content"></div>'

Valider un chemin local :

bin/ncss-linter --path=templates/**/*.html --namespace=foo

Valider une URL distante :

bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --log-level=info

Pour en savoir plus : https://ncss.io/documentation/tools

Answer 4

Twitter utilise SUIT CSS :

https://github.com/suitcss/suit/blob/master/doc/README.md

Le même auteur a également écrit Idiomatic CSS :

https://github.com/necolas/idiomatic-css