Faut-il éviter les noms de classe css comme "floatleft" qui décrivent directement le style attaché ?

Question

De nombreux sites web utilisent des noms de classe comme floatleft , clearfloat , alignright , small , center etc. qui décrivent le style qui est attaché à la classe. Cela semble logique, de sorte que lorsque vous écrivez un nouveau contenu, vous pouvez facilement envelopper (par exemple) <div class="clearfloat">...</div> autour de votre élément pour qu'il se comporte comme vous le souhaitez.

Ma question est la suivante : ce style de dénomination des classes ne va-t-il pas à l'encontre de l'idée de séparer le contenu de la présentation ? En plaçant class="floatleft" sur un élément, c'est clairement mettre des informations de présentation dans le document HTML.

Faut-il éviter les noms de classe de ce type qui décrivent directement le style attaché, et si oui, quelle alternative existe-t-il ?

---

Pour clarifier, il ne s'agit pas seulement de savoir comment nommer les classes. Par exemple, un document sémantiquement correct pourrait ressembler à quelque chose comme :

<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>
...
<div class="foobar">Another unrelated topic</div>

Supposons que toutes ces divs aient besoin d'effacer les flotteurs, la css ressemblerait à quelque chose comme ça :

div.foo, div.bar, div.foobar {
    clear:both;
}

Les choses commencent à se gâter lorsque le nombre de ces éléments de compensation augmente - alors qu'une simple class="clearfloat" servirait le même objectif. Est-il recommandé de regrouper les éléments en fonction des styles qui leur sont associés afin d'éviter les répétitions dans le CSS, même si cela signifie que des informations de présentation se glissent dans le HTML ?

---

Mise à jour : Merci pour toutes les réponses. Le consensus général semble être d'éviter ces noms de classe au profit de noms sémantiques, ou du moins de les utiliser avec parcimonie à condition qu'ils ne gênent pas la maintenance. Je pense que l'important est que les modifications de la mise en page ne nécessitent pas de changements excessifs dans le balisage (bien que quelques personnes aient dit que des changements mineurs sont acceptables si cela facilite la maintenance globale). Merci également à ceux qui ont suggéré d'autres méthodes pour réduire le code CSS.

Answer 1

C'est génial jusqu'à ce que vous refassiez le design, et narrow est surligné en jaune, center se convertit mieux justifié à gauche, et l'image que vous avez appelée floatleft appartient maintenant à la droite.

J'admets avoir commis le péché d'utiliser floatleft y clear comme noms de classe CSS, mais il est beaucoup plus facile de maintenir votre CSS si vous choisissez des noms qui se rapportent à la signification sémantique du contenu, tels que feedback y heroimage .

Answer 2

Noms des classes de présentation

El Spécification HTML est clair sur cette question :

Il n'y a pas de restrictions supplémentaires sur les jetons que les auteurs peuvent utiliser dans la classe classe, mais les auteurs sont encouragés à utiliser des valeurs qui décrivent la nature du contenu, plutôt que des valeurs qui décrivent la présentation souhaitée présentation souhaitée du contenu.

Fait clearleft décrire la nature du contenu ? Pas vraiment. Eric Meyer a fait une blague à ce sujet il y a un moment.

Essayez de trouver une relation structurelle entre des éléments apparemment sans rapport entre eux.

Disons que vous avez des paragraphes sur les canards, des paragraphes sur les singes et des paragraphes sur les grenouilles. Vous voulez qu'ils aient un fond bleu.

<p class="duck"></p>
<p class="monkey"></p>
<p class="frog"></p>

Vous pouvez ajouter cette règle CSS :

p.duck, p.monkey, p.frog {
    background-color: blue;
}

Mais ne sont-ils pas tous des animaux ? Il suffit d'en ajouter un autre animal jeton :

<p class="animal duck"></p>
<p class="animal monkey"></p>
<p class="animal frog"></p>

Et changez la règle CSS en :

p.animal {
    background-color: blue;
}

C'est difficile et ce n'est peut-être pas toujours possible, mais l'important est de ne pas abandonner rapidement.

Et si vous ne pouvez pas ?

Si vous avez beaucoup d'éléments qui n'ont absolument aucune relation structurelle entre eux, cela indique un problème structurel dans votre document. Essayez de réduire le nombre de ces éléments. Cela dit, le regroupement n Les sélecteurs CSS sur une seule règle sont toujours plus efficaces que l'ajout de n les jetons de classe de présentation dans votre document HTML.

Answer 3

Les classes de style doivent être sémantique . Voici un excellent article sur la conception de pages Web sémantiques. (en tout cas, je l'ai trouvé très utile).

EDIT : Je viens de lire un autre article qui donne de bons arguments pour utiliser des choses comme display: inline-block , display: table etc. au lieu de flotteurs. Cela devrait permettre d'éviter les ennuyeux floatleft y clearfix classes. Mais c'est toujours à vous de les rendre sémantiques.

Answer 4

Le principal problème avec les classes nommées floatleft , clear ou autre, c'est le fait que les changements dans la conception impliquent des changements dans le balisage HTML. Cela ne devrait pas se produire, la véritable séparation entre le contenu et la présentation n'est atteinte que lorsque vous pouvez réutiliser le même balisage dans plusieurs conceptions ou même supports (pensez à partager le même HTML entre les versions de bureau et mobile de votre site et à ne changer que les feuilles de style).

Maintenant, pour un exemple pratique :). Pour compléter la réponse de Fredrik, LESSCSS vous permet de cacher les déclarations/mixtes de styles des développeurs. De cette façon, vous pouvez protéger les composants réutilisables dans vos feuilles de style sans risquer de les voir apparaître dans votre HTML.

Exemple de balisage :

<div class="branding">Company Name</div>

Echantillon less code :

// example of reusable functions
.noText() {
    color: transparent;
    text-indent: -9999px;
}
.clear-after() {
    &:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
}

.branding {
    .clear-after();
    .noText();
    background-image: ...;
}

Bien sûr, pour les téléphones portables, vous pouvez vous contenter d'afficher le nom de la société en gras, sans autre style :

.branding {
    color: pink;
    font-weight: bold;
}

Answer 5

Andrew ; il est bon de donner un nom sensé à une classe et un identifiant qui soit facile à comprendre pour vous et vos collègues qui travaillent sur ce projet. Pour moi, les classes small , center , floatleft etc ne définissent rien pour moi parce que lorsque vous donnez la classe centre, cela indique que l'élément est au centre mais il y a d'autres propriétés aussi dans cette classe. like color, background etc

Par exemple

<div class="wrap">
 <div class="center">lorem</div>
</div>

css:
.center{margin:0 auto;}

dans cet exemple de classe center ne sont pas claires pour moi. mais nous pouvons les utiliser comme classe d'aide.

Par exemple

<div class="wrap">
 <div class="panel center narrow">lorem</div>
</div>

css:
.center{margin:0 auto;}

à partir de l'exemple ci-dessus il est maintenant clair pour moi quel est le rôle de la classe center en ce que panel div

POUR EN SAVOIR PLUS, CONSULTEZ CES LIENS :

Quelle est la meilleure façon de nommer les ID et les classes en CSS et en HTML ?

http://www.ronniesan.com/blog/entry.php?title=organizing-your-dom-elements-with-the-proper-ids

http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names