[Résolu] Séparer CSS et Xhtml oui mais...

Bonjour,

J'ai une petite question.
Je lis souvent que l'idéal est de ne pas utiliser directement de css dans une balise (<div style="text-align:center"></div>) mais plutôt d'inclure une feuille de styles.

Il est évident que cela permet plus de clarté et également plus de facilité au niveau des mises à jour du contenu.

Mais comment faites vous pour vous y retrouver au niveau de votre feuille de style. En effet, je centralise ma mise en page générale dans ma feuille de style mais pour les petites mises en page, si j'utilise un "class" ou un "id" à chaque fois, je risque vite de me retrouver avec des dizaines de ligne en css.

Du coup, je me retrouve bien dans mon xhtml... mais plus du tout dans ma feuille de style.

Je ne sais pas si ma question est très claire mais disons qu'en gros, comment faites-vous pour à la fois séparer strictement la mise en page du contenu tout en arrivant encore à vous y retrouver dans votre feuille de style ?

D'avance merci pour vos conseils.
Modifié par Cozy_Cookie (05 Jul 2007 - 23:56)

Salut,

Ne te prends pas la tête avec le plus général qui dicterait sa loi au plus particulier comme un évangéliste dicte sa foi au pauvre quidam.

Il y a trois dispositifs possibles :

. Feuilles de style externe au document

. Feuilles de style externe au body du document

. Propriétés de style dans l'attribut style des tags du document

Tout cela est parfaitement admis et c'est à toi de juger du niveau de généralité que tu veux mettre en oeuvre.

Rien que de l'assez simple finalement, prends les bonnes perspectives et puis c'est tout.

Bon courage quoi...

Pour répondre plus précisément à ta question sur le "comment s'y retrouver dans sa feuille de style", saches qu'il est tout à fait possible de mettre des commentaires qui permettent d'y voir plus clair.

Du style :

/* Header*/
instructions CSS pour le header

/* Menu */
instructions CSS pour le menu

/* Contenu */
instructions CSS pour le menu

/* Footer */
instructions CSS pour le footer

Il est évident qu'il ne s'agit là que d'un exemple ultra simplifié...
Mais c'est une méthode qui permet à l'auteur de s'y retrouver parmis les quelques centaines de lignes CSS qu'il peut saisir.

Cozy_Cookie a écrit :

Je ne sais pas si ma question est très claire mais disons qu'en gros, comment faites-vous pour à la fois séparer strictement la mise en page du contenu tout en arrivant encore à vous y retrouver dans votre feuille de style ?

Bonsoir,

En effet il vaut mieux séparer la mise en forme du contenant, mais j'ai moi aussi une petite question, suivant les bonne pratique il faudrais aussi que la page tienne la route si la feuille de style n'est pas accessible, (ou garder les emphases dans le dur html (strong, b, em etc ..).

Qu'appelle t'on tenir la route pour une page ? Qu'elle garde la même dispositon avec la feuille ou sans ?

Pour répondre à ta question Cozy, les commentaires dans les feuilles de styles sont très pratique pour s'y retrouver. Dis toi que si tu met du style css dans ton dur, il faudras modifier chaque page où il y a du css, alors qu'avec la feuille de style, tu ne modifiera qu'un seul fichier pour tout ton site.
Modifié par Super_baloo8 (05 Jul 2007 - 01:08)

Pour revenir à la question

Cozy_Cookie a écrit :
mais pour les petites mises en page

S'il s'agit de petits effets de mises en pages très ponctuels et ne concernant qu'un ou très peu de documents, alors ne pas hésiter à utiliser les attributs style dans les tags. Si les perspectives changent et qu'un niveau de généralité plus conséquent s'impose alors choisir des solutions plus adaptées.
Modifié par Christian Le Bouler (05 Jul 2007 - 05:37)

Super_baloo8 a écrit :
Qu'appelle t'on tenir la route pour une page ? Qu'elle garde la même dispositon avec la feuille ou sans ?

Au risque de me tromper ...
Dans l'optique où la feuille de style serait inaccessible, je doute fort que la même disposition puisse être conservée.
Cela semble impossible, sinon... à quoi servirait-elle ?

Je pense simplement que ton document doit être bien construit de manière à être lisible et compréhensible si jamais il apparaissait sans mise en forme : il vaut mieux que le contenu soit lu après le menu et avant le footer.
Et bien sûr, comme tu l'as souligné, que les mises en exergue appropriées soient contenues dans le code même de la page...
Modifié par Cygnus (05 Jul 2007 - 09:34)

Merci beaucoup pour ces conseils.
Que pensez-vous de la méthode suivante.

Je crée une feuille de style générale appelée dans chacune de mes pages. Elle contiens les styles que je vais utiliser régulièrement.

Je fais ensuite une deuxième feuille de style propre à chaque page. Elle contiens d'autres styles spécifiques à la page en question.

Bon du coup, je me retrouve avec un grand nombre de fichiers ce qui n'est peut-être pas très pratique non plus ?

Est-ce que quelqu'un utilisé (ou a déjà testé) cette méthode ?

Merci beaucoup pour ces conseils.
Que pensez-vous de la méthode suivante.

Je crée une feuille de style générale appelée dans chacune de mes pages. Elle contiens les styles que je vais utiliser régulièrement.

Je fais ensuite une deuxième feuille de style propre à chaque page. Elle contiens d'autres styles spécifiques à la page en question.

Bon du coup, je me retrouve avec un grand nombre de fichiers ce qui n'est peut-être pas très pratique non plus ?

Est-ce que quelqu'un utilise (ou a déjà testé) cette méthode ?

Cozy_Cookie a écrit :
Je fais ensuite une deuxième feuille de style propre à chaque page. Elle contiens d'autres styles spécifiques à la page en question.

Bon du coup, je me retrouve avec un grand nombre de fichiers ce qui n'est peut-être pas très pratique non plus ?

Est-ce que quelqu'un utilisé (ou a déjà testé) cette méthode ?

Plutôt que de créer plusieurs petits fichiers, à ta place, je mettrais tous les styles annexes dans une unique feuille.
Il te suffit simplement de distinguer chaque page en affectant une class au body, et le tour est joué.

Je l'utilise parfois quand j'ai beaucoup de styles spécifiques à chaque page ou groupe de page.
Le désavantage est que tu dois charger 2 fichiers css sur chaque page, mais si ça peut t'éviter d'vaoir à charger un fichier css trop important sur chaque page (avec beaucop de styles non utilisés), ca peut être intéressant. En particulier, si les styles particulier ne sont pas utilisés sur lapage d'acceuil.

A partir du moment où tu dois répéter des styles sur te différentes pages, c'est que tu 'tes mal débrouillé, mais sinon c'est jouable si tu gères bien tes fichiers.

Fais cependant attention, il faut éviter d'avoir des styles trop différents d'une page à l'autre. Certains styles doivent rester les mêmes de façon générale (liens ou titres par exemple).

C'est personnellement ce que je fais, ou presque. Généralement, je lie une feuille de style par page, par exemple:

<style media="screen" type="text/css">
	@import 'css/home.css';
</style>

Et dans ces feuilles de styles propres à chaque page, j'importe au début de celles-ci les styles valables pour l'ensemble du site:

@import 'global.css';

Lorsque j'ai un layout complexe ou un menu qui demande beaucoup de styles, je scinde une fois de plus cette feuille "global.css" en plusieurs petites:

@import 'reset.css';
@import 'menu.css';
@import 'typos.css';

Ça peut paraître lourd comme méthode à première vue, mais c'est un choix que j'ai fait après plusieurs approches différentes et qui me semble tout à fait pertinent et, surtout, bien plus efficace en terme de maintenance. Bien entendu, pour un petit site tout simple, il n'est naturellement pas nécessaire de multiplier les fichiers de cette manière...

yahrou a écrit :
Fais cependant attention, il faut éviter d'avoir des styles trop différents d'une page à l'autre. Certains styles doivent rester les mêmes de façon générale (liens ou titres par exemple).

Oui, tout à fait. Ma feuille de style spécifique à chaque page ne contiens que des informations spécifiques à chaque page comme par exemple créer une boite de X px centrée,...