28172 sujets

CSS et mise en forme, CSS3

Salut tout le monde.

Je suis en train de lire SMACSS que j’ai découvert ici.

C’est très intéressant. Dans l’ensemble cela rejoint pas mal de mes propres expériences et me convainc de mettre en place des choses que je sentais mais n’avais pas encore formalisées.

Toutefois, j’ai un doute sur un principe que j’ai souvent souhaité mettre en place sans jamais le faire parce que cela me parait aller à l’encontre du principe de CSS : dissocier le flux de la mise-en-forme. Ce principe promut par SMACSS est l’application de classe de mise en forme. Par exemple : .l-inline qui affecte un display: inline-block à l’élément affublé de cette classe. D’un point de vue perf, cela me parait effectivement logique de procéder ainsi, et comme je l’ai dit, j’ai plusieurs fois été tenté de le faire. Toutefois, ainsi on place spécifiquement un marqueur de mise-en-forme figé dans le flux HTML. Si pour une raison ou pour une autre je ne veux plus de inline-block sur l’élément, je suis soit obligé de modifié le HTML (pas toujours possible) soit obligé de changer la déclaration CSS de cette classe qui prend du coup une application radicalement opposée à ce que son nom décrit ! Pire, dans l’air du Responsive, un élément peut très bien être en inline-block sur desktop et en block sur smartphone !

Du coup, je me pose des questions sur la pertinence de ce conseil, qui pourtant me traine dans la tête depuis des années… Je viens donc demander l’avis de la communauté : qu’en pensez-vous ?
Modifié par Derwoed (04 Dec 2013 - 15:18)
Perso, je le fais pour des cas très spécifiques, notamment pour symboliser un état particulier genre exemple à la con : mettre le background en rouge quand un texte dépasse x caractères. Il y a donc toujours une requête PHP qui se cache derrière et qui va balancer la classe spécifique (.red).
Après, j'en ai quelques unes qui me sont bien utiles du genre .left .right dont on devine aisément l'intérêt.
Pour le reste, je ne suis pas fan d'enchaîner les class pour les raisons que tu invoques.
Modifié par Nilav_ (04 Dec 2013 - 16:54)
Nilav_ a écrit :

Après, j'en ai quelques unes qui me sont bien utiles du genre .left .right dont on devine aisément l'intérêt.


Justement, c’est le genre de classe utile mais qui me pose problème : quid d’un bloc avec une classe .left quand le bloc doit être à droite sur smartphone ? Idem, si le client veut le placer à droite après coup mais que l’intervention de dev Java (sur un gros projet) n’est pas prévue pour satisfaire cette demande ?

D’ailleurs, je viens de voir que Knacss implémente aussi ce genre de classe…

Ma question est bien sûr plus philosophique que pratique, j’ai bien conscience que dans la plupart des cas le problème sera facile à corriger pour peut que l’on ait la main à la fois sur le CSS et le HTML… mais ce principe de classe de mise-en-forme n’est-il pas contraire à la séparation du fond et de la forme ? Peut-être suis-je trop extrémiste ?

En tout cas merci pour ton avis, j’espère en avoir d’autres…
Modérateur
Derwoed, je suis aussi un peu un intégriste du web sémantique. D'un pur point de vue idéologique du web je préfère éviter au possible de nommer les classes selon un attribut esthétique. Le cas cité par Nilav_ est quasi un cas d'école:

class="red" devient class="warning", c'est complètement portable et générique comme méthodologie. Et pour aller plus loin encore, dans un préprocesseur, si on veut pousser le vice jusqu'au bout du rêve.

/** LESS **/
@lightRedColor: #fcc;

[…]

@warningBgColor: @lightRedColor;

[…]

.warning {
  background-color: @warningBgColor;
}


Ici pas de problèmes en effet. Quelle que soit la méthodologie utilisée.

pour les class="left", class="columns-2", classs="right", etc. la question est plus délicate.

La montée de la popularité des librairies CSS a en effet amené à inverser le sens de la réflexion. Traditionnellement l'idée est de produire du HTML portable et échangeable, dont on lui a enlevé ses attributs visuels, et de lui dédier une CSS et une mise en page pour le mettre en valeur. L'idée qui se cache derrière l'utilisation de ces classes, est de rationaliser le travail de conception et donc de privilégier le partage de CSS.
Donc dans le cas 1: Un HTML pour plusieurs CSS, dans le cas 2: Une CSS pour plusieurs HTML. C'est une vision purement pratique de l'intégration en mettant un peu de côté l'idéal HTML.

Cela, dans plein de situations, se défend. Premièrement, l'idée du partage du HTML n'est que peu utilisé dans la pratique. Nos applications modernes préférant échanger du JSON, XML, YAML et reconstruisant derrière un nouveau code HTML sur mesure. Tout ce qui se passe par robots n'en a que peu à faire de la sémantique de nos classes (hormis certaines exceptions) car leur côté complètement libre ne rend pas leur utilisation très pratique. Après bien entendu, les media-queries redonne de l'importance au fameux modèle «un HTML pour plusieurs CSS».

Au final, il faut surtout bien comprendre les forces des deux modèles, et leurs faiblesses.

EDIT:
[quote=Derwoed]
D’ailleurs, je viens de voir que Knacss implémente aussi ce genre de classe…[/code]
Dans le cas d'une bibliothèque CSS, évidemment, le second modèle est utilisé. Comme le but est d'écrire des CSS qui pourront être utilisées dans de multiples codes HTML, elle doivent utiliser des noms de classes indiquant leurs propriétés visuelles.
Modifié par kustolovic (04 Dec 2013 - 22:39)
C'était un exemple simpliste, effectivement je préfère utiliser .warning à une classe indiquant clairement la couleur.
Pour le .left et .right, en fait je ne les utilise que dans un cas, une pagination suivant/précédent. Et encore, bien souvent ça finit dans un .previous .next comme le .red pour le .warning.

En définitive, je me rends compte que je tends potentiellement à vouloir être extrêmiste comme vous et en même temps, quand le cas se présente, ça n'est pas un cas de conscience pour moi. Si je peux éviter une classe selon un attribut esthétique, je le fais. Mais finalement, on peut toujours être générique, quand on ne le fait pas, c'est purement pour une raison pratique de lisibilité du code. Et justement, historiquement, je pense que j'ai commencé par .left .right et plus tard j'ai opté pour des choses plus génériques. Une façon de m'approprier le code en somme (je précise que je suis un pur autodidacte et que j'ai donc tout appris en suivant des tutos, soit, en imitant).
Modifié par Nilav_ (05 Dec 2013 - 18:01)
OK. Merci à vous 2. Kustolovic, ton explication semble bien illustrer le pourquoi de la bascule.
Pas d’autres avis ?

Bon, en tout cas cela confirme ce que je pensais : l’utilisation de .left, .inline… pourtant préconisés dans un bon livre (SMACSS) et présent dans les frameworks CSS sont une gageur sur un site qui peut avoir besoin de s’afficher différemment en fonction de certains contexte (RWD par exemple). Mais n’est-ce pas le potentiel de n’importe quel site ? Du coup, j’hésite à intégrer cette façon de faire à mon propre "framework" CSS…
Administrateur
Bonjour,

si vous n'avez pas la main sur le code HTML, il faut tout de suite abandonner l'idée d'utiliser .left si "flottant à gauche sur desktop (sur un site desktop first)" n'est pas définitif : la correction passe en effet par le code HTML et pas par la CSS.

J'utilise KNACSS (ô surprise) sur un projet de plus de 200 gabarits intégrés en équipe, plus de la moitié étant des formulaires. Si on avait dû mettre des classes bien sémantiques sur chaque input pour indiquer ensuite en CSS et leur largeur en 1024, et leur largeur dans 4 autres résolutions le poids de la CSS aurait - au pif - décuplé. Et j'aurais vite manqué d'idées pour le nommage de ces classes (probablement de la longueur d'un "booking-truc-step3-machin-bidule". Probablement moins maintenable que .w300p.large-w410p...) Smiley confused
C'était parfois un peu lourd mais en général à cause de la compatibilité IE6 nécessaire à l'époque.
Pour une modification 3 mois plus tard, j'ouvre le fichier HTML et je modifie quelques classes : c'est au moins aussi rapide que de devoir ouvrir le fichier HTML puis aller chercher dans les CSS le nom des classes du module à modifier.

A contrario, au-delà de 10 classes sur un élément, on a viré la moitié de ces classes et ajouté des classes HTML "support" de styles CSS : un parent .nom-module puis des éléments avec classes .nom-module-titre, .nom-module-item, etc et des CSS avec des padding et largeurs au px près. Avoir besoin de classes .w318p ici et .w316p ailleurs, c'est pas bon signe.

C'est adapté pour de gros sites où "on a la main". Ce n'est pas la recette miracle (et je ne conseille pas d'apprendre cette manière de faire pour un intégrateur débutant. Il faut être à l'aise avec l'intégration "traditionnelle" et face à un problème connaître 4 solutions possibles).
Simplement à partir d'une certaine taille de projet, la séparation stricte du fond et de la forme ne convient plus du tout.
De toute façon, le "fond" ce n'est pas seulement le code HTML et sa sémantique. Il est réalisé d'une certaine manière au vu d'une maquette elle-même issue des besoins du client, de sa logique métier ET des pages qui précèdent et suivent (dans le cas de séries de formulaires à remplir et gérer). Une page n'est pas indépendante des autres ; il faut déjà harmoniser en fonction de l'ensemble...

Sinon pour le problème spécifique du .left qui sera à droite sur un smartphone : bonne remarque Smiley smile
Dans le cas d'un site "desktop first" (j'appelle ça "IE first" parce que c'est bien IE8 le dernier blocage), après quelques tatonnements, j'ai utilisé des classes préfixées pour décrire le devenir des éléments une fois passé un point de rupture.
Ex : .small-right indique que dans la Media Query correspondant à ".small-*" (480 dans mon cas mais c'est une convention arbitraire), l'élément sera flottant à droite. S'il a la classe .left, il était flottant à gauche "par défaut" (et en "desktop first", le défaut c'est la résolution desktop) et devient flottant à droite en-dessous de 480.
Ces préfixes ne sont PAS liés au matériel comme .tablet-* ou .mobile-* parce que si .tablet-* c'est 768px de large, c'est aussi 1280px haute densité sur la tablette Android haut de gamme de mon collègue et dans 2 ans il y aura peut-être un smartphone en 600dpi et 768px Smiley smile
Avec ça, on peut avoir 5 éléments avec la même classe en "desktop" qui auront 2 comportements différents en "large", que des comportements différents en 768 et à nouveau tous le même comportement en 480 (alors que la MQ <768 s'applique en <480) et 320 (ex : 1 seule colonne, label et input sur 2 lignes et input pleine largeur parce qu'on a plus assez de place pour les avoir côte à côte).
Testé sur un seul projet mais sur plus d'1 an quand même et bien assez de pages Smiley smile

Je travaillerais dans une start-up avec 1 seul site réalisé et maintenu en interne, connu sur le bout des doigts ou bien à styler un code HTML réalisé par des développeurs extérieurs, je ferais peut-être d'autres choix, respectivement une CSS personnalisée et hyper-optimisée et du traditionnel avec une bonne dose de patch parce que bon, pas le choix.
Pour un back office à réaliser en 1 semaine, j'utiliserais Bootstrap sans aucun remord parce que "ça fonctionne" et que plein de monde peut ensuite le maintenir ; c'est documenté, le nommage est clean et il y a suffisamment de composants existants pour répondre aux besoins prévisibles.
Merci pour cette contribution.

Il est amusant de constater qu’avec des contraintes qui semblent proches (« gros sites où "on a la main" » : en ce qui me concerne, un site portail donnant accès à une trentaines de services différents avec plus de mille pages par version et nouvelle version tous les 3 mois) nous avons eu des choix opposés Smiley biggrin : pas plus de 2 classes par item (sauf les classes pour le JS), pas de classe de forme (.left…)… Toutefois, ces années passées à faire pousser cette plante tentaculaire nous ont montré les limites de notre système : surcharges inutiles si l’archi avait été mieux pensée au départ, difficultés de maintenance et surtout grosses difficultés d’appréhension du projet par les nouveaux intégrateurs… Toutefois, il était impossible de revenir en arrière. Maintenant que le client envisage le RWD et accepterait une refonte partielle, on peut essayer de réfléchir en amont aux meilleures solutions. D’où ma lecture de SMACSS (entre autre) qui dans l’ensemble corrobore ma propre expérience… sauf sur ces fameuses classes de mise-en-forme aux-quelles je reste réfractaire, d’autant plus dans un projet RWD…