La Programmation Orientée Objet est un concept qui a fait ses preuves dans la conception de sites internet. En effet, elle permet d’avoir un code structuré, facilement réutilisable et dont la mise à jour est rapide et aisée.
Pourquoi ne pas l’adapter au CSS ?
A priori, le CSS n’a pas grand chose à voir avec de la POO. Pourtant, à y regarder de plus près, on y retrouve des concepts bien familiers:
- Système de Classes
- Propriétés
- Héritage
Comment l’appliquer au CSS
Les classes CSS
Plutôt que d’attribuer à chaque élément de mise en page une classe CSS dont les propriétés sont spécifiques à cet élément précis, on peut tout à fait prévoir de créer des classes génériques que l’on utilisera au besoin selon la mise en page souhaitée.
Exemple ci-dessous d’une mise en page dite « spécifique »:
index.html
<div class="photo"> <p>Une photo: <img src="maphoto.jpg" alt="Ma Photo" /></p> </div>
style.css
.photo{
float:left;
font-style:italic;
font-weight:bold;
width:50%
}
Il est évident que le code CSS ci-dessous est exclusivement réservé à cet élément « photo ». Pour des éléments quasi similaires (correspondance de deux voire trois propriétés), le code CSS devient redondant, ce qui implique un alourdissement du poids de la feuille de style et la nécessité de passer dans chacune des classes concernées lors de mises à jour.
Exemple ci-dessous d’une mise en page dite « orientée objet »
index.html
<div class="floatleft strong italic half"> <p>Une photo: <img src="maphoto.jpg" alt="Ma Photo" /></p> </div>
style.css
.floatleft{
float:left
}
.strong{
font-weight:bold
}
.italic{
font-style:italic
}
.half{
width:50%
}
Ici au contraire, le code est:
- « générique »,
- réutilisable sur d’autres éléments,
- compréhensible,
- explicite,
- n’alourdit pas la feuille de style (seulement un peu l’index.html vous me direz …)
La nomenclature des classes CSS est importante et doit être bien écrite pour être réutilisable. Ainsi, il ne faut pas écrire:
p.chapeau span.lettrine{
font-size:2.5em
}
Mais
.chapeau .lettrine{
font-size:2.5em
}
De cette façon, vous pouvez changer à souhait le code xhtml mais aussi utiliser ces classes sur d’autres éléments.
L’héritage
Quoique vous fassiez, vous l’utilisez. A partir du moment où vous définissez un sous ensemble, c’est de l’héritage. Par exemple :
.mondiv .header p{
margin:0 10px
}
Après, il convient de l’utiliser à bon escient.
Trop de détails encombre la feuille de style et oblige à redéfinir les propriétés par la suite.
Ainsi:
#header #bandeau .top ul li a{
text-decoration:underline
}
peut se réduire à :
#header .top li a{
text-decoration:underline
}
De manière générale, il est plus intéressant d’appliquer des styles par héritage que par définition de classes. De cette manière, il est plus simple de changer la structure sans devoir repasser sur chacun des éléments afin d’y changer la classe.
Exemple:
<div>
<ul>
<li><p class="itemlist">Item 1</p></li>
<li><p class="itemlist">Item 2</p></li>
</ul>
</div>
Avec comme feuille de style:
.itemlist{
padding:5px
}
peut être remplacé par:
<div class="list">
<ul>
<li><p>Item 1</p></li>
<li><p>Item 2</p></li>
</ul>
</div>
et
.list li p{
padding:5px
}
Enfin, sachez qu’en utilisant trop d’héritage vous pourriez rencontrer des problèmes de redéfinition de classe.
En effet, mettons que vous avez cette classe dans votre page principale:
#content .header p{
color:blue
}
Et que vous voulez qu’en règle générale tous les paragraphes du « header » soient de couleur rouge. Vous écririez logiquement :
.header p{
color:red
}
Eh bien, malheureusement, cette dernière propriété ne sera pas prise en compte car la définition précédente à l’aide d’un identifiant est prioritaire par rapport à la définition par la classe.
Vous pourriez toutefois ruser en écrivant :
.header p{
color:red !important /* Prend le pas sur toutes les définitions */
}
Mais ce n’est pas du joli joli !
Conclusion
Voici donc un aperçu du CSS Orienté Objet, une façon simple, logique et structurée d’améliorer votre intrégration xHTML, qui vous fera gagner du temps précieux, et rendra votre code nettement plus lisible et réutilisable !
Loading ...
Mouais, à ce tarif là, autant tout mettre dans la balise style. Je suis pas sûr que tu aies bien compris le concept des CSS.
@Paul: Quel intérêt de tout mettre dans la balise style ? L’intérêt d’une feuille de style externe est qu’elle est utilisable sur un ensemble de pages … Il me semble donc que tu n’aies pas bien compris la mécanique des feuilles de styles. Je t’invite donc à te renseigner avant de critiquer
@Paul: Le css est avant-tout une manière de coder proprement, de ne pas tout mélanger. Le style n’a plus sa place dans le code html tout comme maintenant le javascript avec jQuery. Il est donc tout à fait logique d’utiliser le css, et comme le présente guillaume, de la façon la plus ergonomique.
[...] Le CSS Orienté Objet par Guillaume Voisin [...]
Houla !
@ Guillaume et Sébastien : pas d’accord avec vous, Paul a raison…
Il est très discutable d’intégrer ces éléments dans la balise : il n’y a plus de séparation contenu/contenant !
Si vous créez un titre avec par exemple les classes « .rouge », « .centre » et « .italique », que se passera-t-il si vous voulez changer la couleur en « .bleu » ??? Vous serez obligés d’aller dans toutes vos pages comportant cette définition et de modifier chaque occurrence une à une !!!
C’est tout le contraire du concept même des CSS : on définit le titre comme une classe dans la feuille de styles, et si le style doit changer il suffit d’aller faire la modif. dans le fichier CSS et non dans le (x)html.
Donc, vous régressez : comme dit Paul, regardez comment étaient faites les balises avant le CSS, car c’est exactement ce que vous êtes en train de reproduire
Sébastien, rien n’est ergonomique là-dedans !!!
@ JP Je suis d’accord avec toi sur le principe d’attribuer une couleur à un titre. Il est absurde de considérer mettre une classe « bold » puis « rouge » à un titre (encore que si le rouge est une des couleurs utiliser dans la maquette graphique, cela permet de modifier la teinte plus facilement que dans tout le fichier css).
Ce que je voulais montrer, c’est la force du css au sens objet pour des classes utiles. Par exemple il me semble tout à fait pertinent de décliner des classes « center » pour un text-align:center, un « floatleft » pour un « float:left » ou encore une classe « clearfix » pour un clear:both, tout simplement car ce sont des classes récurrentes auxquelles on fait souvent appel lors d’une intégration.
Mon fichier de « mise à plat » CSS est notamment constituée des éléments suivants :
.floatleft{ float:left }
.floatright{ float:right }
.clearfix{ clear:both; font-size:1px; line-height:1px }
*html .clearfix{ clear:both; height:0; font-size: 1px; line-height: 0px; padding:0; margin:0 }
.center{ text-align:center }
.left{ text-align:left }
.right{ text-align:right }
.one_third{ width:33% }
.two_third{ width:67% }
.half{ width:50% }
.block{ display:block }
.displaynone{ display:none }
Et je ne crois pas régresser en faisant cela mais bien au contraire mieux organiser mes templates.
C’est un sujet assez polémique quoi qu’il en soit, chacun peut avoir son avis sur la question