Nombre d'arguments maxi à l'attribut class

Version imprimable

24/07/2011, 05h46
ciliaris

Nombre d'arguments maxi à l'attribut class

Bonjour,

Ayant découvert la possibilité de placer plusieurs noms de feuilles de styles dans un attribut class="".

J'avais déjà travaillé sur des classes séparées ( taille , alignement , bord , margin , padding , backgrd , ) et je n'ai donc plus qu'à assembler ces arguments pour construire une page. Je trouve ça vraiment bien.

Et je regarde si cela peut remplacer un système qui consiste à imbriquer divers blocs div dotés chacun d'une feuille de style spécialisée ( dimensions et encradrement, corps de texte, alignement ...)

Les divers essais faits aujourd'hui montrent que le code html est plus facile à lire qu'avec un enchevêtrement de blocs. Et les navigateurs que j'ai sur ma machine ne posent pas de problème.

Cela peut donner par exemple :

Code:

<div class="centrblock w800px linhfor bordtopgrp1px txtalleft txt3nrc">

Je trouve la mise en page plus simple par ce procédé. Les arguments sont des constructions algorithmiques, et leur assemblage aussi.

Avant d'envisager de propager dans la base, je voulais demander aux spécialistes si cette possibilité d'arguments multiples est à leur connaissance reconnue par tous les navigateurs, et s'il y a un nombre d'arguments à ne pas dépasser.

Merci d'avance pour vos suggestions.

Et bon dimanche.
24/07/2011, 11h40
12monkeys

Bonjour

Citation:

Envoyé par ciliaris

Ayant découvert la possibilité de placer plusieurs noms de feuilles de styles dans un attribut class="".

Hum :koi: tu veux dire des noms de classe, je supposes ?

Je n'ai pas connaissance d'une limitation du nombre de noms de classes pour un élément HTML. Je n'ai jamais vraiment testé au delà de 4.

Mais a ma connaissance c'est déconseillé de multiplier les classes pour un même élément HTML : ce n'est pas un code propre que d'avoir beaucoup de classes pour un même élément.

Citation:

Envoyé par ciliaris

Et je regarde si cela peut remplacer un système qui consiste à imbriquer divers blocs div dotés chacun d'une feuille de style spécialisée ( dimensions et encradrement, corps de texte, alignement ...)

:koi: :koi: mais comment utilises tu les classes ??

Les déclarations de tes différentes classes : "centrblock w800px linhfor bordtopgrp1px txtalleft txt3nrc" peuvent être regroupées en une seule attribuée au div auquel elle est sensée être appliquée.

Peux tu nous montrer un cas précis où tu utilises ce genre de procédé ?
24/07/2011, 16h48
ciliaris

Merci 12monkeys

Citation:

Envoyé par 12monkeys

Peux tu nous montrer un cas précis où tu utilises ce genre de procédé ?

Supposons un texte tout seul au milieu d'une page.
Plusieurs critères définissent l'ensemble des styles utilisés pour obtenir la forme souhaitée.

- 1 la marge du cadre du contenant
- 2 la distance du contenu par rapport au cadre intérieur du contenant (padd)
- 3 la couleur du fond
- 4 l'alignement du texte
- 5 la taille de ce texte
- 6 la couleur de ce texte

En pure théorie, à une extrémité de la méthode, on peut par exemple déclarer, dans le doc css, 5 possibilités différentes pour chacun de ces 6 critères, couvrant ainsi les divers besoins. 6 x 5 classes donc. Puis construire la page en imbriquant 6 blocs div, chacun étant très spécialisé dans son rôle cosmétique. Cela fait beaucoup de blocs div à imbriquer, mais une économie dans le nombre de classes envisagées dans le doc css.

L'autre extrême du raisonnement, c'est de le faire avec un seul div, et un seul nom de classe. C'est en théorie possible, mais dans ce cas, vu le nombre incalculable de noms de classes différentes, le nom de chaque classe sera probablement très long, et le nombre de lignes différentes dans le doc css sera très élevé : dans mon exemple, quelque chose comme 6 puissance 5.

En recherche de modélisation, j'avais au début fait en sorte qu'il soit possible de réaliser cette présentation avec trois blocs div. L'un orienté dimensions et encadrement, le suivant consacré à l'alignement, et le dernier au corps du texte. A chacun est destiné dans le doc css une grille de classes.

Je peux donc en trois blocs div couvrir bon nombre de variantes. Cela fait moins de blocs dans la page html, mais encore beaucoup de cas envisagés dans le doc css, dont certains qui seront peu utilisés, voire presque jamais. Et cela alourdit tout de même, et parfois inutilement, le doc css. Et à l'usage, c'est un peu bâtard, loin d'être satisfaisant.

Je sais donc depuis peu que ces trois noms de classes, un par div, peuvent être assemblés dans un seul attribut de classe, pour la présentation d'un seul bloc div. Ce qui n'est déjà pas négligeable.

Mais ces trois noms de classes correspondant eux mêmes à des assemblages de styles, donc des grilles de classes dans le doc css, il me semble plus intéressant d'utiliser plus de noms de classes, mais des classes plus spécialisées.

Face au nombre infini de possibilités offertes par l'effet cascade du CSS, je suppose que c'est là un dilemme constant.

Citation:

Envoyé par 12monkeys

Les déclarations de tes différentes classes : "centrblock w800px linhfor bordtopgrp1px txtalleft txt3nrc" peuvent être regroupées en une seule attribuée au div auquel elle est sensée être appliquée.

C'est sans doute cela qui me manquait. Il me reste à découvrir comment on déclare une classe composée de plusieurs autres noms de classes. Je vais sans doute en trouver des exemples sur le web, mais ce sera un plaisir de lire sur ce forum des avis de spécialistes dans ce domaine.

Bonne semaine à tous.
24/07/2011, 19h07
12monkeys
Bon personnellement j'aurais préféré un vrai exemple, une vrai page où tu applique ton principe...

Citation:

Envoyé par ciliaris

Supposons un texte tout seul au milieu d'une page.
Plusieurs critères définissent l'ensemble des styles utilisés pour obtenir la forme souhaitée.

- 1 la marge du cadre du contenant
- 2 la distance du contenu par rapport au cadre intérieur du contenant (padd)
- 3 la couleur du fond
- 4 l'alignement du texte
- 5 la taille de ce texte
- 6 la couleur de ce texte

En pure théorie, à une extrémité de la méthode, on peut par exemple déclarer, dans le doc css, 5 possibilités différentes pour chacun de ces 6 critères, couvrant ainsi les divers besoins. 6 x 5 classes donc. Puis construire la page en imbriquant 6 blocs div, chacun étant très spécialisé dans son rôle cosmétique. Cela fait beaucoup de blocs div à imbriquer, mais une économie dans le nombre de classes envisagées dans le doc css.

C'est pas comme ça qu'on fait ! Je n'ai jamais vu personne faire ainsi. Tous ces "critères" comme tu les appelle sont à déclarer dans une seule règle. Tu crées une règle contenant :
- la marge du cadre du contenant
- et la distance du contenu par rapport au cadre intérieur du contenant (padd)
- et la couleur du fond
- et l'alignement du texte
- et la taille de ce texte
- et la couleur de ce texte

Citation:

Envoyé par ciliaris

L'autre extrême du raisonnement, c'est de le faire avec un seul div, et un seul nom de classe. C'est en théorie possible, mais dans ce cas, vu le nombre incalculable de noms de classes différentes, le nom de chaque classe sera probablement très long, et le nombre de lignes différentes dans le doc css sera très élevé : dans mon exemple, quelque chose comme 6 puissance 5.

C'est en effet celle méthode que tout le monde utilise.

Sur le nom de ta classe : on ne nomme pas sa classe en fonction de la déclaration qu'elle contient, comme dans ton exemple : w800px.
Si tu veux changer la largeur tu devras changer toutes les fois où ce nom de classe apparait dans le code HTML ou alors te retrouver avec des noms de classe qui ne correspondent pas au contenu. De plus s'il faut changer tes noms de classe dans 800 fichiers HTML... Tu t'éloigne de l'intérêt du CSS.
On nomme sa classe en fonction de la partie HTML qu'elle cible : .header .corps .citation etc...

Sur le nombre de classes : non tu n'en auras pas autant que tu indiques : tu ne vas pas créer un nombre incalculable de classes, pourquoi faire ? Tu crées les classes dont tu as besoin et rien de plus.

Un exemple dans ce que tu cites : la couleur du texte. Donc le texte de ta page à une seule couleur, mettons le noir. Ton paragraphe que tu veux cibler "un texte tout seul au milieu d'une page" s'il doit avoir une couleur différente quel est bien l'intérêt de créer 16.777.216 classes avec toutes les couleurs différentes affichables sur un écran d'ordinateur moderne ?

Ta page va prendre 2 jours pour s'afficher. Il faut rationaliser : tu ne crées que les règles CSS dont tu as besoin, en les appliquant aux éléments de ta page web qui ont un style spécifique en tenant compte, pour réduire le nombre de classes, de la cascade et de l'héritage.

Citation:

Envoyé par ciliaris

En recherche de modélisation, j'avais au début fait en sorte qu'il soit possible de réaliser cette présentation avec trois blocs div. L'un orienté dimensions et encadrement, le suivant consacré à l'alignement, et le dernier au corps du texte. A chacun est destiné dans le doc css une grille de classes.

Je peux donc en trois blocs div couvrir bon nombre de variantes. Cela fait moins de blocs dans la page html, mais encore beaucoup de cas envisagés dans le doc css, dont certains qui seront peu utilisés, voire presque jamais. Et cela alourdit tout de même, et parfois inutilement, le doc css. Et à l'usage, c'est un peu bâtard, loin d'être satisfaisant.

Je sais donc depuis peu que ces trois noms de classes, un par div, peuvent être assemblés dans un seul attribut de classe, pour la présentation d'un seul bloc div. Ce qui n'est déjà pas négligeable.

Mais ces trois noms de classes correspondant eux mêmes à des assemblages de styles, donc des grilles de classes dans le doc css, il me semble plus intéressant d'utiliser plus de noms de classes, mais des classes plus spécialisées.

Face au nombre infini de possibilités offertes par l'effet cascade du CSS, je suppose que c'est là un dilemme constant.

:koi:
Et que fais tu des autres sélecteurs ? Pourquoi se focaliser sur les classes ?
Pour sélectionner tous les paragraphes du corps de ta page : div#corps p. Le titre de 1er niveau (h1) qui doit être unique dans la page en HTML 4 peut être ciblé ainsi :
Code:

1 2 3 4 h1 { color: red; etc... }
Tu t'éloignes de tous les avantages du CSS, je trouve...

Citation:

Envoyé par ciliaris

( citation 12monkeys) Les déclarations de tes différentes classes : "centrblock w800px linhfor bordtopgrp1px txtalleft txt3nrc" peuvent être regroupées en une seule attribuée au div auquel elle est sensée être appliquée.

C'est sans doute cela qui me manquait. Il me reste à découvrir comment on déclare une classe composée de plusieurs autres noms de classes. Je vais sans doute en trouver des exemples sur le web, mais ce sera un plaisir de lire sur ce forum des avis de spécialistes dans ce domaine.

Non tu n'as pas compris ce que je voulais dire : ce n'est pas possible ce que tu penses faire. On ne peut pas créer une classe qui va regrouper plusieurs autres "sous-classes".
Ce que je voulais dire c'est que tu dois créer des classes en fonction des éléments HTML auxquels tu veux les attribuer et non en fonction des règles CSS qu'elles contiennent.
Clairement : tu ne crées pas une classe pour une largeur de 800px (dans ton exemple w800px) mais tu crées une classe pour ton div qui est le header de ta page dans laquelle classe tu vas indiquer une largeur, le centrage du bloc, une bordure, le style du texte, etc... si tout ça n'a pas déjà été déclarée avant...
D'ailleurs dans ce cas tu ne devrais même pas créer une classe mais plutôt un id car ton header est logiquement unique dans la page.
25/07/2011, 18h13
ciliaris

Citation:

Envoyé par 12monkeys

Bon personnellement j'aurais préféré un vrai exemple, une vrai page où tu applique ton principe...

Mon site est piloté intégralement par un SGBD, en frontal donc, et 100% par le code de ce SGBD.

+ de 350.000 pages indexées actuellement dans google, et + de 1.200.000 en réalité dans cette base, que mon logiciel rafraîchit 24h/24.

Il n'est donc pas si facile de faire une page juste pour montrer un dispositif expérimental. C'est pour cela que je m'excuse de ne pouvoir montrer d'exemple. Et le temps me manque : je n'ai pas pris un jour de repos depuis près de 3 mois.

Ce que j'ai compris sur le CSS, c'est que la cosmétique ne doit plus figurer dans le code html que sous forme d'attribut "style" ou d'attribut "class", les autres attributs ayant vocation à décrire la structure du document.

Je suis passé directement à l'utilisation de l'attribut "class", et c'est un plaisir en effet de constater la légèreté du code, et le gain de temps à l'affichage.

Mais le doc.css est un document externe, et dans mon cas, il est généré à 100% par du code. Et les noms des classes sont bien évidemment des références, elles même représentées dans la structure logicielle de cette base de données. Les propriétés accolées à une classe, sont elles-même des assemblages de valeurs, préalablement affectées à diverses variables, assemblées donc lors de la construction dynamique des pages. Le but est de conserver au développeur la capacité de n'avoir à gérer que du code de son SGBD, via des algorithmes donc, et de ne pas avoir à gérer le texte d'un document externe.

Je dois donc trouver un modèle de construction algorithmique de pages, qui convienne à la fois au standard w3, aux critères d'évaluation des moteurs de recherche, à la qualité esthétique, et que je puisse propager ensuite aisément dans cette base.

Les moyens extrêmes que je décris dans mon message précédent sont supposés, mais juste dans une démarche d'étude.

Il n'est sans doute pas raisonnable de faire un dogme du <div> unique avec class="class1 class2 class3 class4 class5 class6"

Tout comme il n'est sans doute pas plus raisonnable de faire un dogme de l'imbrication de blocs distincts et spécialisés <div> "class1" <div> "class2" <div> "class3" <div> "class4" <div> "class5" <div> "class6"

Mais on voit bien tout de même qu'en matière de taille de code, le premier de ces deux dogmes est plus économe, comme en matière de lisibilité.

De plus, en terme de maintenance dans le doc.css, une classe minimaliste et spécialisée, basique donc, sera pérenne. Tandis qu'une classe décrivant l'aspect d'une partie de page, même générique, composée de paramètres groupés mais étrangers, posera divers problèmes : de portabilité et de maintenance.

Le doc.css étant généré par moyen logiciel, une classe abandonnée pour raison de changement de style, ne sera plus présente dans le html à venir, mais sera encore représentée dans des pages stockées dans la base et non encore rafraîchies, voire dans du cache ici ou là sur le web. Le nom de cette classe sera donc encore appelé à l'avenir, et il doit demeurer un bon moment dans ce doc.css.

Je vais donc continuer à chercher, probablement dans le compromis, avec plus d'un niveau de <div>. Mais je crois tout de même que ce sera un vrai progrès de définir les classes de chacun de ces blocs imbriqués par une classe "composée" de deux ou trois autres "classes" basiques.

Et en tous cas au développement, c'est un vrai plus que de pouvoir affiner la présentation avec des sous classes basiques présentes définitivement dans le doc css, sans avoir à tâtonner en modifiant à chaque fois le document css lui même.

Je te remercie 12monkeys pour le temps que tu as passé sur ces précieux commentaires. Tant pis pour cette impossibilité de fabriquer un classe avec d'autres classes, mais cela viendra peut-être.

En tout cas le sujet est ouvert pour plusieurs mois en ce qui me concerne, parce que j'apprécie la convergence xhtml permettant de publier par le même moyen des pages à destination d'écrans d'ordinateurs et à la fois d'écrans tactiles, et ce chantier va durer très longtemps.

+ de 30.000 pages de mon site sont en ligne pour les écrans tactiles. Et là plus qu'ailleurs il faut bosser pour la légèreté du code.

En souhaitant une très bonne semaine à tous.