Comment coder vous vos feuilles CSS?

Bonjour je suis nouveau sur le forum

Cette question s'adresse aux developpeurs qui cree eux même leur fichiers CSS.

Selon mon expérience il existe deux méthodes de codages:

- Utiliser les identifiants et la specificité en majorité :

la feuille CSS devient alors à 90% composée de #id.
specificite: #colonne h3#titrea
accès: id="titrea"

--atout de la méthode:
- difficulté facile
- lisibilité moyenne voir illisible sur une CSS assez longue

- Utiliser les classes en majorité et les identifiants uniquement pour la mise en page:

la feuille CSS est composé de 90% de classe et de 10% d identifiant
specificite:
.boite{...} /* element parent */
.football{...} p /* element fils ou unique */
accès: class="boite football"

--atout de la méthode
-difficulté moyenne voire difficile selon les projets de site
-lisibilité bonne


J'utilise pour l'instant la première méthode mais il arrive des moments ou je bloque. (ex: #oneColLayout #content ul.first et #oneColLayout #content ul.autrechose => ne passe pas chez IE )

J'imagine que la seconde méthode pose moins de problèmes mais peu de developpeurs l'utilise (desinformation ?...).


Voila j'espère que ca reste lisible (pas évident dans un textarea )

Salut,

je ne distinguerais pas du tout ça comme ça

Ce dont tu parles n'a en fait que peu à voir avec les CSS...

L'identification (avec ID ou CLASS) des éléments HTML est propre au HTML, non aux CSS.

On utilise un id pour un élément que l'on veut distinguer de façon unique (le conteneur du site par exemple) et par une class des éléments que l'on veut regrouper sous une même propriété.

Les ID/CLASS ne servent pas qu'aux CSS, JavaScript les utilises aussi.

Et on oppose pas "plein d'id" à "plein de class".

Ce sont deux choses différentes qu'il faut utiliser judicieusement

Peut être que tu n'as pas saisi la différence entre ID et CLASS :
http://css.alsacreations.com/Bases-et-indispensables/Quelle-est-la-difference-entre-une-classe-et-un-id

Par ailleurs, je comprend mal en quoi utiliser des class est plus lisible que des id ou que les id sont plus facile que les class


En fait, l'important, c'est la correcte structure HTML de base (ce qui comprend le balisage, son imbrication, son regroupement en sous éléments (typiquement, des <div> qui regroupent les éléments entre eux) et ensuite appliquer des identifiant unique (id) ou non (class)

Le travail est alors à 90% fait, reste à utiliser des sélecteurs CSS efficace en utilisant au maximum la cascade CSS.

Voili voilou

Bonjour mofo_4,

Pas sûr d'avoir suivi ton raisonnement. Je comprends effectivement que l'on puisse fonctionner soit avec beaucoup d'identifiants, soit avec beaucoup de classes, mais ça n'est pas au niveau de la feuille de style que je m'occupe de ça. Tout dépend de l'organisation de mon contenu :
– élément unique sur la page : identifiant ;
– type d'élément, style réutilisable : classe.

À partir de là, je fais le CSS en fonction. En général, l'utilisation du sélecteur descendant (l'espace) suffit à faire un code clair. Il suffit parfois de faire attention à la priorité des sélecteurs, pour éviter de se retrouver avec un sélecteur « inactif » car de priorité trop basse.

Pour répondre à olivier au niveau de la lisibilité sur les classes:

Prenons une liste mise dans une boite:

.box{
margin: 20px 0;
}
.boitenumero1 ul{
list-style:none;
background: #fff
}
.boitenumero2 ul{
background: #000
}
.boitenumeron ul{
float:left;
display:block
}

La classe mère est abstraite, definition chez les enfants ( principe de base OO)
On a un accès a N boites différentes en faisant:

<div class="box boitenumero1"></div>

Autrement on peut toujours créer N boites différentes ( en identifiant ou classe peu importe )

#boite1, .boite1{}
#boite2, .boite2{}

ou encore tomber dans les bug ( ce qui m'est arrivé au niveau de la mise en page  [decu] )

#boite1 ul.name{}
#boite1 ul.first{}  !pouf


.....

Plus clair ?
Modifié par mofo_4 (13 Jul 2006 - 17:10)

mofo_4 a écrit :

Plus clair ?

Non

a écrit :
Tout dépend de l'organisation de mon contenu :
– élément unique sur la page : identifiant ;
– type d'élément, style réutilisable : classe.

Relis un peu ce qu'a dit mpop, mofo.

Les id sont utilisés pour des éléments que l'on n'utilise qu'une fois(pour la structure du site pour ma part).
Par exemple, le footer, le conteneur, le header, le menu de gauche etc...

Et les class pour différents paragraphes, listes devant servir de contenu etc....


Mais si j'avais par exemple
Deux type de boites différentes qui contienent les 2 mêmes boites

<div id="boite_droite">
<div class="boite1">
<div class="boite2">
</div>

<div id="boite_gauche">
<div class="boite1">
<div class="boite2">
</div>

Voici un exemple un peu dans ton type de question. C'est surtout pour une question d'organisation je pense

Les modos, corrigez moi si j'ai tort.
Modifié par Oryo (14 Jul 2006 - 09:25)

Bien entendu je suis d accord avec le fait que l'id arrive sur les élements uniques.

Le problème que je cite est la dérive ;de mettre des id un peu partout; qui arrive quand on fait pas gaffe et que la feuille commence a gonfler.

J'imagine que le code s'améliore lorsqu'on utilise vraiment ces id.


Fo que je bosse moi !

mofo_4 a écrit :
Le problème que je cite est la dérive ;de mettre des id un peu partout; qui arrive quand on fait pas gaffe et que la feuille commence a gonfler.

Oui, mais là encore, s'il y a dérive elle sera en premier chef dans le code HTML.

De toute façon, une utilisation raisonnée des sélecteurs CSS permet d'éviter la surenchère, que ce soit la surenchère de classes ou celle d'identifiants.
Utiliser des conteneurs avec classes et/ou identifiants, viser les descendants de ces conteneurs via l'utilisation du sélecteur descendant (caractère espace), utiliser les classes multiples (<balise class="classe1 classe2">)… il y a toujours moyen de faire un code CSS qui demande le moins possible d'ajouts de classes ou d'identifiants à tout va dans le HTML.

Jolie reponse pleine d informations

Merci

Hum...

Le moins possible n'est souvent pas le mieux possible, selon le contexte.

Un zest de surcharge pondérale en classes et/ou en id est un bienfait quand cela permet, dans un cadre CMS par exemple, de mettre à disposition des rédacteurs des outils à l'utilisation aisée. Avec un enjeu nettement plus important, qui est l'industrialisation.

La fameuse économie du balisage minimal chère à Molly Holzschlag est tout à fait justifiée sur le fond, sur des contenus figés et des intervenants experts. Mais pas pour répondre aux besoins courants. On n'en est pas encore là.

Laurent Denis a écrit :
Le moins possible n'est souvent pas le mieux possible, selon le contexte.

Un zest de surcharge pondérale en classes et/ou en id est un bienfait quand cela permet, dans un cadre CMS par exemple, de mettre à disposition des rédacteurs des outils à l'utilisation aisée. Avec un enjeu nettement plus important, qui est l'industrialisation.

C'est vrai que dans certains contextes (gabarits HTML standard d'un CMS, par exemple) on peut vouloir attribuer un identifiant ou une classe à la plupart des éléments, quitte à ce que chaque thème graphique n'en utilise qu'un quart…

Et que l'économie d'identifiants et de classes dans un document HTML n'est pas non plus un impératif réel.

mpop a écrit :

C'est vrai que dans certains contextes (gabarits HTML standard d'un CMS, par exemple) on peut vouloir attribuer un identifiant ou une classe à la plupart des éléments, quitte à ce que chaque thème graphique n'en utilise qu'un quart&#8230;

C'est un des aspects, mais mineur : en effet, un thème graphique de CMS peut aisément être accompagné du template HTML comportant les classes et id nécessaires. Et un CMS peut générer le template nécessaire lorsqu'un utilisateur cherche à créer sa propre déclinaison des styles et des contenus (CMS orientés objets).

L'enjeu se situe plutôt:
- en amont, dans la mutualisation des ressources CSS quand on a à gérer plusieurs sites
- en aval, dans la facilité que l'on peut donner aux rédacteurs (c'est à dire à ceux qui vont simplement saisir du contenu, pas installer ou personnaliser) pour paginer et présenter selon leurs besoins dans le cadre d'un ou plusieurs site, à l'aide de classes et d'id génériques produisant chacun un des effets de base nécessaires (encarts, abstracts, placement d'image à côté du texte, modes de présentation et d'alignement de champs de formulaires, etc.)
Modifié par Laurent Denis (16 Jul 2006 - 08:04)

Je me rappelle de l'époque ou pour economiser les "hits" on devait incorporer la majorité des élements dans une seule page.

Le fait de rechercher ses classes dans sa feuille est je pense un signal d'alarme.

Perso je me suis formé sur ce site http://doodles.cssmastery.com/ extrait d'un livre d'andy budd. ( je deconseille d'acheter ce livre car il s'agit d'un recueil de recettes CSS de part le web ).

La feuille quand à elle est bien codée mais on arrive rapidement à bout de solution dans le cas d'un site composée de page différentes les unes des autres.

PS: Publié un cms GNU/GPL est selon moi un réel problème pour le Web !
Modifié par mofo_4 (17 Jul 2006 - 04:53)