Le CSS Orienté Objet

Publié par Gui dans CSS, Développement, Internet

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 !

Aller plus loin …

8 commentaires

  1. Paul

    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.

  2. Guillaume

    @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 😉

  3. Sébastien

    @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.

    • ShadoO

      De la façon la plus ergonomique ??? excuse du peu mais cela reste à voir. Pour certaines mise en pages j’utilise plus ou moins ce qui est appeler code css en « objet » (et je doute que le terme soit judicieusement approprié), mais sur des sites avec beaucoup d’éléments cela passe vite à la trappe.

      Cela n’est applicable que dans une moindre mesure. Tu veux que tes pages css soient moins lourdes ? alors coder votre css en ligne :
      #wrap {background:….;color:#000;padding:5px 2px;}

      mais cela devient vite illisible lorsque l’on veut le reprendre.
      le plus intelligent si l’on veut réduire le poids de ses fichiers css est créer un parseur qui va compiler votre code css et tout rassembler sur une ligne à la volé.
      On garde une copie originale bien indenté et celle qui apparait en ligne est compressé exactement comme pour les js.

      la lecture du processus informatique est plus rapide sur l’horizontalité que sur la verticalité. Après ce type de disposition devient plutôt chiant lorsque l’on doit intervenir sur une petite modif directement en ligne.

      Autre conseil d’après des tests en plus effectué, le traitement de feuille de style est bien plus rapide si les feuilles de styles sont scindées en plusieurs qu’en une seul.

      Ce qui ne veut pas dire non plus que l’on doit scinder à tord et à travers. Une mauvais exemple bien et pas bien, c’est sur le cms joomla. Les parties sont bien trop destructuré dans trop de feuilles de styles différentes ce qui devient rapidement chiant sur de la maintenance.

      Donc à utiliser tout ce qui est dit dans cet article et ce que j’ai dit à bon escient.

      Encore une dernière note comme là dit Paul, je suis entièrement d’accords avec ce qu’il dit.

      Petite piste afin d’appuyer mon argument ainsi que le sien, dois-je rappeler qu’avant la popularisation du css des balises tel que la couleur, les marges et j’en passe se trouvaient dans les balises html ??? On en est pas très loin dans cet article. Donc régression non merci.

  4. JP

    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 !!!

  5. Guillaume

    @ 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 😉

  6. Jack NUMBER

    C’est un concept intéressent surtout pour les gros site utilisant des CMS mais pour un petit site je ne pense pas qu’il y est une réelle utilité.

  7. Clem

    Je viens de tomber sur cet article par hasard… Le fait de lire CSS objet m’a intrigué… j’ai pensé à une nouvelle techno toute fraiche!

    En fait non, mais je souhaiterai donner mon avis sur cette technique. Si elle permet de gagner du temps sur un unique découpage, le jour où le design change (et c’est très courant maintenant de changer plusieurs fois à l’année de style), on est coincé et on se retrouve avec des .floatLeft ou .center dont le contenu sera calé à droite, parce que la nouvelle maquette le veut ainsi!

    Et là c’est la fin des haricots, on se retrouve avec des styles hérités prises de tête qu’on doit contrôler sur chaque page.

    Que penser d’un tel code lorsqu’il faut développer un style pour le site mobile qui conserve le même html?!

    Non, comme l’a bien expliqué JP, le contenu et la forme doivent être séparés au maximum. Si la structure HTML est bien pensée, on n’a plus besoin de ce HTML ‘objet’ (qui n’a rien d’objet ici, soit dit en passant…)

    Maintenant avec le support de CSS2 et CSS3 de la quasi totalité des navigateurs, on accède à n’importe quelle branche du DOM sans avoir à toucher au HTML. D’ailleurs la tendance va vers encore plus de séparation avec HTML5

Laisser une réponse


Post shadow