FAQ CSS orientée objet

Texte original : http://wiki.github.com/stubbornella/oocss/faq (version 28 une fois traduite)
Traduction: ytzong

Comment définir « objet » dans OOCSS ?

Les objets sont similaires aux classes en JAVA et conservent les caractéristiques OO.

Un objet CSS se compose de 4 parties :

1. Peut être le HTML d'un ou plusieurs nœuds DOM
2. Déclaration de style CSS à partir du nom de classe du nœud wrapper
3. Semblable aux images d'arrière-plan et aux composants de sprites pour l'affichage et
4. Comportement, écouteur ou méthode JavaScript associé à un objet

Cela peut prêter à confusion car chaque classe CSS n'est pas nécessairement son propre objet, mais peut être un composant d'une classe wrapper. Par exemple:

<div classe="mod">
<div class="intérieur">
<div class="hd">Tête de bloc</div>
<div class="bd">Corps du bloc</div>
<div class="ft">Pied de bloc</div>
</div>
</div>

L'objet est un module avec classe mod. Comprend 4 nœuds de composants (ne peuvent pas être indépendants du module, dont 2 blocs, intérieur et corps, et deux blocs optionnels, tête et pied)

Comment l’OOCSS améliore-t-il les performances ?

OOCSS offre le double des avantages en termes de performances :

1. Code CSS hautement réutilisable, nécessitant très peu de code CSS, c'est-à-dire :
   • Fichiers plus petits, ce qui entraîne des transferts plus rapides
   • À mesure que la proportion de code CSS appelé dans les pages du site augmente, il est prévu qu'il soit réutilisé ou mis en cache par le navigateur.
2. Moins de redessins et de calculs de mise en page en ce qui concerne le navigateur
   • Sur une seule page, plus les règles CSS sont réutilisées, moins le moteur de rendu passe de temps sur les « valeurs calculées ».
   • Les classes « d'extension » ajoutées manuellement remplacent moins de règles, ce qui signifie encore une fois que le moteur en fait moins pour appliquer les règles.

Voulez-vous utiliser l'ID pour styliser le contenu ?

Il s'agit d'un "cadeau" de performance lorsque vous réutilisez un objet sur la même page (ou sur le même site en même temps qu'il se met bien en cache). L’utilisation de l’ID pour écrire des styles ne peut être utilisée qu’une seule fois sur la même page. @cgriego (twitter) Je l'ai comparé aux singletons et je pense que c'est très précis. Il peut arriver que vous souhaitiez utiliser des identifiants pour définir des styles, tels que des menus d'en-tête très spécifiques. Dans ce cas, vous pouvez utiliser des identifiants pour mettre en sandbox des éléments spéciaux et vous assurer que le code ici n'affecte pas d'autres parties du site. Réfléchissez à deux fois avant de choisir l'ID plutôt que la classe. À mesure que votre site se développe, il est très difficile de prédire ce que les autres feront du HTML créé à partir de votre CSS. Si vous avez le choix, envisagez autant que possible l’évolutivité.

Je pense supprimer les identifiants de la tête, du corps et du pied du modèle. Certaines personnes peuvent avoir plusieurs zones résidentielles. Il est plus difficile de deviner plusieurs en-têtes et pieds de page pour un site, mais je parie qu'il y a des concepteurs qui le pensent, donc les identifiants sont susceptibles de disparaître (ce n'est pas si simple, lisez l'article original : quelqu'un pourrait avoir plusieurs zones de contenu principales. Plusieurs les en-têtes et pieds de page de sites sont plus difficiles à imaginer, mais je parie qu'il y a un concepteur qui peut imaginer quelque chose comme ça, donc les identifiants sont très susceptibles de disparaître.).

D’un autre côté, les crochets d’identification sont parfaits pour créer des liens. Mettez-les en HTML, mais ne les utilisez pas pour écrire des styles.

Source : 99css