Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

CSS orienté objet par Lenny ROUANET

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 25 Publicité

CSS orienté objet par Lenny ROUANET

Télécharger pour lire hors ligne

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.

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.

Publicité
Publicité

Plus De Contenu Connexe

Similaire à CSS orienté objet par Lenny ROUANET (20)

Plus par La Cuisine du Web (20)

Publicité

Plus récents (20)

CSS orienté objet par Lenny ROUANET

  1. 1. CSS ORIENTÉ OBJET Lenny ROUANET — CTO @operaenergie @lennyrouanet — lenny.rouanet.me
  2. 2. PROBLÉMATIQUE
  3. 3. CSS ORIENTÉ OBJET Produire un code CSS : ▸ Réutilisable ▸ Partageable ▸ Maintenable PROBLÉMATIQUE @lennyrouanet
  4. 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. 5. QUELQUES PISTES
  6. 6. CSS ORIENTÉ OBJET CSS Cascading Style Sheets ≈ Feuilles de styles avec heritage @lennyrouanet
  7. 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. 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. 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. 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. 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. 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. 13. LA SÉMANTIQUE APPELLE LA SÉMANTIQUE CSS ORIENTÉ OBJET @lennyrouanet
  14. 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. 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. 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. 17. CSS ORIENTÉ OBJET MULTI FICHIERS Séparation des fichiers de styles selon leur nature : ▸ Variables ▸ Base (reset) ▸ Objets Merci HTTP 2 @lennyrouanet
  18. 18. CSS ORIENTÉ OBJET FACTORISER ▸ Limite la duplication de style ▸ Améliore la lisibilité ▸ Facilite la correction et la maintenance @lennyrouanet
  19. 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. 20. EXEMPLES
  21. 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. 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. 23. CONCLUSION
  24. 24. CSS ORIENTÉ OBJET CONCLUSION ▸ Styles sémantiques ▸ Objets réutilisables ▸ Maintenance simplifiée @lennyrouanet
  25. 25. MAINTENANT,
 À VOUS DE JOUER Lenny ROUANET — CTO @operaenergie @lennyrouanet — lenny.rouanet.me coder !

×