Réutiliser, partager et maintenir ses objets CSS : c’est possible ! Par ce terme j’entends l’organisation de feuilles de styles sous forme d’objet pouvant être : déclinées et surchargées, réutilisées pour d’autres projets, partagées avec d’autres développeurs et intégrateurs, maintenables au cours des différentes versions du site ou de l’application.

1. CSS ORIENTÉ OBJET
Lenny ROUANET — CTO @operaenergie
@lennyrouanet — lenny.rouanet.me

2. PROBLÉMATIQUE

3. CSS ORIENTÉ OBJET
Produire un code CSS :
▸ Réutilisable
▸ Partageable
▸ Maintenable
PROBLÉMATIQUE
@lennyrouanet

4. CSS ORIENTÉ OBJET
ON NE PARLERA PAS DE ...
▸ Frameworks CSS : Bootstrap, Foundation, Semantic UI, etc. ....
▸ Pré-processeurs CSS : SASS, LESS, PostCSS, etc. ....
@lennyrouanet

5. QUELQUES PISTES

6. CSS ORIENTÉ OBJET
CSS
Cascading Style Sheets
≈
Feuilles de styles avec heritage
@lennyrouanet

7. CSS ORIENTÉ OBJET
SÉMANTIQUE
La sémantique est la nature d'une donnée dans son contexte.
Qu'est ce que cette donnée ?
La réponse nous donne sa nature sémantique.
@lennyrouanet

8. CSS ORIENTÉ OBJET
SÉMANTIQUE HTML Titre principal <h1>
Liens <nav> <a>
Nombre de commentaires <div>
Paragraphe <p>
Image <img>
Article <article>
@lennyrouanet
Liens catégorie <ul> <li> <a>

9. CSS ORIENTÉ OBJET
HTML NON SÉMANTIQUE<div id="main" role="main">
<section class="headline container">
<h1>L’usine qui fabriquait les Galaxy Note 7 explose à son tour</h1>
<nav>
<a href="http://www.legorafi.fr/2016/10/03/apple-annonce-un-iphone-avec-une-capacite-dexplosion-encore-plus-forte-que-
le-galaxy-note-7/" rel="prev">Article du passé</a>
<a href="http://www.legorafi.fr/2016/10/28/les-nouveaux-macbook-pro-seront-fournis-sans-ecran/" rel="next">Article du
futur</a>
</nav>
</section>
<section class="metas container">
<a href="#commentaires" class="comments_blue">50</a>
<ul class="post-categories">
<li>
<a href="http://www.legorafi.fr/category/hi-tech/" rel="category tag">Hi-Tech</a>
</li>
</ul>
<span class="context">Publié le 11/10/2016 par <a href="http://www.legorafi.fr/author/la-redaction/">La Rédaction</a></span>
</section>
<div class="container multicolumn">
<div class="left">
<figure class="main_picture">
<img src="http://www.legorafi.fr/wp-content/uploads/2016/10/111016-820x346.jpg" class="attachment-large" alt="Sjoerd
van der Wal Petar Chernaev">
<figcaption>Sjoerd van der Wal Petar Chernaev</figcaption>
</figure>
</div>
</div>
</div>
@lennyrouanet

10. IDENTIFICATION NON SÉMANTIQUE
CSS ORIENTÉ OBJET
<div id="main" role="main">
<section class="headline container">
<h1>L’usine qui fabriquait les Galaxy Note 7 explose à son tour</h1>
<nav>
<a href="http://www.legorafi.fr/2016/10/03/apple-annonce-un-iphone-avec-une-capacite-dexplosion-encore-plus-forte-que-
le-galaxy-note-7/" rel="prev">Article du passé</a>
<a href="http://www.legorafi.fr/2016/10/28/les-nouveaux-macbook-pro-seront-fournis-sans-ecran/" rel="next">Article du
futur</a>
</nav>
</section>
<section class="metas container">
<a href="#commentaires" class="comments_blue">50</a>
<ul class="post-categories">
<li>
<a href="http://www.legorafi.fr/category/hi-tech/" rel="category tag">Hi-Tech</a>
</li>
</ul>
<span class="context">Publié le 11/10/2016 par <a href="http://www.legorafi.fr/author/la-redaction/">La Rédaction</a></span>
</section>
<div class="container multicolumn">
<div class="left">
<figure class="main_picture">
<img src="http://www.legorafi.fr/wp-content/uploads/2016/10/111016-820x346.jpg" class="attachment-large" alt="Sjoerd
van der Wal Petar Chernaev">
<figcaption>Sjoerd van der Wal Petar Chernaev</figcaption>
</figure>
</div>
</div>
</div>
@lennyrouanet

11. CSS ORIENTÉ OBJET
HTML SÉMANTIQUE
<article>
<h1>L’usine qui fabriquait les Galaxy Note 7 explose à son tour</h1>
<nav>
<a href="http://www.legorafi.fr/2016/10/03/apple-annonce-un-iphone-avec-une-capacite-dexplosion-encore-plus-forte-que-le-
galaxy-note-7/" rel="prev">Article du passé</a>
<a href="http://www.legorafi.fr/2016/10/28/les-nouveaux-macbook-pro-seront-fournis-sans-ecran/" rel="next">Article du futur</
a>
</nav>
<a class="comments_blue">50</a>
<ul class="post-categories">
<li>
<a href="http://www.legorafi.fr/category/hi-tech/" rel="category tag">Hi-Tech</a>
</li>
</ul>
<span class="context">Publié le 11/10/2016 par <a href="http://www.legorafi.fr/author/la-redaction/">La Rédaction</a></span>
<figure class="main_picture">
<img src="http://www.legorafi.fr/wp-content/uploads/2016/10/111016-820x346.jpg" alt="Sjoerd van der Wal Petar Chernaev">
<figcaption>Sjoerd van der Wal Petar Chernaev</figcaption>
</figure>
</article>
@lennyrouanet

12. CSS ORIENTÉ OBJET
CSS SÉMANTIQUE
article { }
article h1 { }
article nav { }
article nav a { }
article a.comments_blue { }
article ul.post-categories { }
article ul.post-categories li { }
article ul.post-categories li a { }
article span.context { }
article span.context a { }
article figure.main_picture { }
article figure.main_picture img { }
@lennyrouanet

13. LA SÉMANTIQUE
APPELLE
LA SÉMANTIQUE
CSS ORIENTÉ OBJET @lennyrouanet

14. CSS ORIENTÉ OBJET
MULTI CLASSES
Surcharge de classes.
.field { }
.field.valid { }
.field.error { }
.field.require { }
.field.require.valid { }
.field.require.error { }
@lennyrouanet
Nom :
Nom :
Nom * :
Nom * :
Nom :
Nom * :

15. CSS ORIENTÉ OBJET
MULTI CLASSES
.comments_blue, .comments_black, .comments_white {
display: inline-block;
width: auto;
height: auto;
vertical-align: top;
font-weight: bold;
font-size: 22px;
line-height: 38px;
box-sizing: border-box;
text-decoration: none;
background-repeat: no-repeat;
background-color: transparent;
background-position: 0 11px;
padding-left: 21px;
}
.comments_blue {
color: #152c56;
background-image: url("../img/comment-blue.svg");
}
.comments_black {
color: #000;
background-image: url("../img/comment-black.svg");
}
.comments_white {
color: #FFF;
background-image: url("../img/comment-white.svg");
}
.comments {
display: inline-block;
width: auto;
height: auto;
vertical-align: top;
font-weight: bold;
font-size: 22px;
line-height: 38px;
box-sizing: border-box;
text-decoration: none;
background-repeat: no-repeat;
background-color: transparent;
background-position: 0 11px;
padding-left: 21px;
}
.comments.blue {
color: #152c56;
background-image: url("../img/comment-blue.svg");
}
.comments.black {
color: #000;
background-image: url("../img/comment-black.svg");
}
.comments.white {
color: #FFF;
background-image: url("../img/comment-white.svg");
}
@lennyrouanet

16. CSS ORIENTÉ OBJET
VARIABLES
Utilisations de variables CSS :root {
--color-text: #333;
--color-text-link: #0161d8;
--text-font: Helvetica;
--text-size: 14px;
}
@lennyrouanet

17. CSS ORIENTÉ OBJET
MULTI FICHIERS
Séparation des fichiers de styles selon leur nature :
▸ Variables
▸ Base (reset)
▸ Objets
Merci HTTP 2
@lennyrouanet

18. CSS ORIENTÉ OBJET
FACTORISER
▸ Limite la duplication de style
▸ Améliore la lisibilité
▸ Facilite la correction et la maintenance
@lennyrouanet

19. CSS ORIENTÉ OBJET
QUELQUES PISTES
▸ Heritage CSS
▸ HTML sémantique
▸ CSS sémantique
▸ Multi-classes
▸ Variables
▸ Séparer les fichiers de styles
▸ Factorisation des objets HTML / CSS
@lennyrouanet

20. EXEMPLES

21. CSS ORIENTÉ OBJET
.button { }
a.button { }
.button:hover { }
.button.disabled:hover { }
.button:active { }
.button.main { }
.button.add { }
.button.search,
.button.info { }
.button.change { }
.button.delete { }
.button.disabled { }
@media screen and (max-width:360px){
.button { }
.button.main { }
}
EXEMPLES :
<a class="button"></a>
<a class="button change"></a>
<a class="button main add"></a>
UN BOUTON
@lennyrouanet
Lire l’article Modifier Ajouter Rechercher Supprimer Voir

22. CSS ORIENTÉ OBJET
<table class="list">
<thead>
<tr>
<th></th><td></td><td></td><td></td><td></td>
</tr>
</thead>
<tfoot>
<tr>
<th></th><td></td><td></td><td></td><td></td>
</tr>
</tfoot>
<tbody>
<tr>
<th></th><td></td><td class="number"></td><td
class="number"></td><td class="number"></td>
</tr>
<tr>
<th></th><td></td><td class="number"></td><td
class="number"></td><td class="number"></td>
</tr>
<tr>
<th></th><td></td><td class="number"></td><td
class="number"></td><td class="number"></td>
</tr>
</tbody>
</table>
EXEMPLES :
table.list { }
table.list th { }
table.list td { }
table.list th.number,
table.list td.number { }
table.list thead th,
table.list thead td { }
table.list thead th { }
table.list thead td { }
table.list tbody th,
table.list tbody td { }
table.list tbody th { }
table.list tbody td { }
table.list tbody tr:nth-child(even) th,
table.list tbody tr:nth-child(even) td { }
table.list tfoot th,
table.list tfoot td { }
table.list tfoot th { }
table.list tfoot td { }
UNE LISTE SOUS FORME DE TABLEAU
@lennyrouanet
Id Prix unitaire Quantité Prix
103 450,00 € 1 450,00 €
382211 19,99 € 8 159,92 €
1921 979,95 € 3 2939,85 €
29821 53,00 € 4 212,00 €
210973 613,82 € 3 1841,46 €
5 références 2116,76 € 19 5603,23 €

23. CONCLUSION

24. CSS ORIENTÉ OBJET
CONCLUSION
▸ Styles sémantiques
▸ Objets réutilisables
▸ Maintenance simplifiée
@lennyrouanet

25. MAINTENANT,
À VOUS DE JOUER
Lenny ROUANET — CTO @operaenergie
@lennyrouanet — lenny.rouanet.me
coder !