SlideShare a Scribd company logo
1 of 21
Download to read offline
Beautiful CSS
Structurer, documenter, maintenir.
Petit rappel CSS :

• Décrit la présentation de documents
  HTML, XML, XUL, ...


• sélecteur {               Bloc de règles
  
   propriété: valeur;
  }
Structure (ou pas)
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
#TB_overlay { position:fixed; z-index:100; top:0px; left:0px; height:100%; width:100%; }
* html #TB_overlay { position:absolute; height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight :
document.body.offsetHeight + 'px'); }
.TB_overlayMacFFBGHack {background: url(../img/skin/macFFBgHack.png) repeat;}
.TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; }
#TB_window { position:fixed; background:#ffffff; z-index:102; color:#000000; display:none; border:4px solid #525252; text-align:left; top:50%; left:50%; }
* html #TB_window { position:absolute; margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement &&
document.documentElement.scrollTop || document.body.scrollTop) + 'px'); }
#TB_window img#TB_Image { display:block; margin:15px 0 0 15px; border-right:1px solid #ccc; border:1px solid #666; }
#TB_caption { height:25px; padding:7px 30px 10px 25px; float:left; }
#TB_closeWindow { height:25px; padding:11px 25px 10px 0; float:right; }
#TB_closeAjaxWindow { padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; }
#TB_ajaxWindowTitle { float:left; padding:7px 0 5px 10px; margin-bottom:1px; }
#TB_title { background-color:#e8e8e8; height:27px; }
#TB_ajaxContent { clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; }
#TB_ajaxContent.TB_modal { padding:15px; }
#TB_ajaxContent p { padding:5px 0px 5px 0px; }
#TB_load { position:fixed; display:none; height:13px; width:208px; z-index:103; top:50%; left:50%; margin:-6px 0 0 -104px; }
* html #TB_load { position:absolute; margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement &&
document.documentElement.scrollTop || document.body.scrollTop) + 'px'); }
Structure (ou pas)


  Stop au carnage !
Convention de dev
Formatage :
    Le formatage du code consiste en son écriture aéré et homogène.

•   Une ligne ne doit pas dépasser 80 colonnes ;

•   Retour à la ligne :
    •  A la fin de chaque bloc de règles ;
    •  A la fin de chaque règle CSS, sauf si il en existe qu’une ;
    •  Avant chaque nouveau groupe de bloc de règles ;

•   Tabulation :
    •  une tabulation correspondant à 4 espaces devant chaque règle CSS

•   Espaces :
    •  Peu être utilisé avant une valeur (ex : propriété: valeur)
Convention de dev
Nommage :
•   Ecrivez votre code et vos commentaires toujours en anglais ;

•   Utilisez slug plutôt que “lowerCamelCase” pour créer des ensembles de mots ;
    ex : boxType1 devient box-type-1

•   Les caractères recommandés par le W3C sont de type alphanumérique, ainsi
    que le trait d’union, l’underscore ne fait pas partie des recommandations.

•   Nommez vos sélecteurs de manières sémantiques :
    ex : texteRougeGras devient warning-1
    ex : blocSimpleShadow devient box-type-1
    ex : blocRight devient box-contextual

•   Utilisez des mots clefs génériques : cols, col, inner, box, content, list, menu,
    footer, header ... inspirez vous de HTML 5
Convention de dev
    Commentez :

•    Utilisez un en-tête de fichier qui décrit son contenu :
     /* ---------------------------------------------------------------------------
          CSS Document

         project:    XYZ Inc.
         created:    2008-10-17
         author:     Yves Van Goethem
         email:      yves.vangoethem@entreprise.com
         website:    http://www.entreprise.com

         summary:     GENERIC
                      HEADER
                      FOOTER
                      BREADCRUMP
                      CONTENT
                      ...
     --------------------------------------------------------------------------- */
Convention de dev
    Commentez :


•    Utilisez des en-têtes pour chaque catégorie définie dans “summary” (précédé par
     un retour de ligne en plus du dernier bloc de règles CSS) :
     /*   =HEADER
     --------------------------------------------------------------------------- */
     #header {
          border:1px solid #000;
     }



     /*   =FOOTER
     --------------------------------------------------------------------------- */
     #footer {
          border:2px solid red;
     }
Convention de dev
    Commentez :

•    Expliquez l’utilisation de choses propriétaires, de hacks, de règles compliqués ...
     A l’aide de mots clefs et/ou de références : TRICKY, INFO, BUGGY ...
     body {
          font-size:72.75%; /* :INFO: 1em = 11px */
     }

     .box-type-1 {
          float:left;
          margin:10px 20px;
          display:inline; /* :TRICKY: IE 6 double-margin bug */
     }

     .box-type-2 {
          /*
               :TRICKY: Firefox 3 transparent background
               http://developer.mozilla.org/En/CSS/Color
          */
           background:rgba(125, 125, 125, 0.5);
     }
Structure de dev
/* ---------------------------------------------------------------------------
      CSS Document

     project:    XYZ Inc.
     created:    2008-10-17
     author:     Yves Van Goethem
     email:      yves.vangoethem@entreprise.com
     website:    http://www.entreprise.com

     summary:     GENERIC
                  HEADER
--------------------------------------------------------------------------- */


/*    =GENERIC
--------------------------------------------------------------------------- */
body {
      font-size:68. 75%; /* :INFO: 1em = 11px */
}


/*    =HEADER
--------------------------------------------------------------------------- */
#header {
      display:-moz-inline-box; /* :TRICKY: Gecko 1.8 inline-block */
      display:inline-block;
}
Simplifie toi la vie !

•   Toutes ces conventions permettent de définir un vrai modèle de travail, elles
    sont inspiré d’autres conventions de développement tel que Java, PHP, C,
    JavaScript, ... tout développeur pourra s’y retrouver.

•   Vous n’êtes pas seul, on bosse sur un marché international et notre métier
    est déjà assé incompris comme ça...
    Rappelez-vous ... CSS est destiné à faciliter la maintenance d’un site, d’où la
    nécessité d’avoir un code lisible, structuré, et donc accessible à tout
    développeur, peu importe son origine, son équipement, lieu de travail, ...
Bonnes pratiques
CSS reset
 Appliquez toujours un reset CSS avant de faire quoi que ce sois :
 * {
       margin:0;
       padding:0;
       vertical-align:baseline;
       line-height:1.35em;
 }


 Ciblez d’autres spécificités :
 a { color: green; }

 a img, fieldset, form {
      border:0;
 }

 ins, abbr, acronym {
       text-decoration:none;
       border:0;
       font-style:normal;
 }
Bonnes pratiques
Class génériques intrusives :

•   N’utilisez pas de class génériques intrusives de types :

    •   clear, clearfix, spacer

    •   floatLeft, floatRight

    •   marginT10, paddingB10, border5px

    •   bold, underline, leftArrow

    •   ...
Bonnes pratiques
    Imbriquation de fichiers (en prod) :
•    Préférez l’utilisation de media-queries dans votre code CSS, plutôt que de faire
     plusieurs appels dans votre code HTML.
     Améliorez la maintenance en séparant d’avantage la CSS de l’HTML et les
     performances en faisant moins de requêtes.

     <link rel=quot;stylesheetquot; href=quot;css/basic.cssquot; type=quot;text/cssquot; charset=quot;utf-8quot; />
     <link rel=quot;stylesheetquot; href=quot;css/print.cssquot; type=quot;text/cssquot; media=”print” charset=quot;utf-8quot; />



     devient 1 seul fichier CSS avec :
     @media print {
          ...
     }
     @media screen {
          ...
     }
Bonnes pratiques
Remédiez à la “Classitis”


 <h2 class=”ttlNews”>La fin des happy hours</h2>
 <p class=”blocNews”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
 do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 <span class=”blocNews”><a href=”#” class=”linkNews”>En savoir plus</a></span>



 Devient :

 <div class=”box-news-1”>
     <h2>La fin des happy hours</h2>
     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua.</div>
     <span><a href=”#”>En savoir plus</a></span>
 </div>
Bonnes pratiques
    Ne déstructurez par le code en pensant le structurer ...


•    Définissez tout à un endroit, ça évitera aux développeurs d’ouvrir 3 fichiers pour
     modifier un même sélecteur.
     L’erreur la plus commune est de se baser sur plusieurs fichiers : layout.css,
     typography.css, color.css ... Ce qui mène souvent à des surchages de règles.

•    Par ailleurs, écrivez vos hacks de manière à ce qu’ils sautent aux yeux, utilisez les
     commentaires d’aides qu’on a vu tout à l’heure ou écrivez les entièrement sur
     une ligne, ne les externalisez pas dans d’autres fichiers.

•    Suivez les recommendations de développement “Zen”, développez de manière à
     faciliter la dégradation sur les navigateurs d’anciennes générations et l’évolution
     sur les navigateurs modernes.
Bonnes pratiques
Utilisez les sprites CSS en sachant que :

•   CSS est destiné à définir la présentation, évitez les techniques de
    remplacement CSS, le contenu n’est pas sensé se retrouver dans un code CSS,
    cela entraine des problèmes d’accessibilités :

    •   Impossible de modifier les tailles de polices ;

    •   Impossible d’imprimer le contenu ;

    •   Illisible pour les lecteurs d’écrans ;

    •   Tout cela est également le câs pour sIFR

•   Si le contenu de votre bloc dépasse ses dimensions, il risque de faire apparaitre
    d’autres parties du fichier qui sert de Sprite
Bonnes pratiques
Typographie



•   Concevez des pages accessibles, peu importe l’équipement et les méthodes de
    navigation des utilisateurs, pour ce faire :

    •   Utilisez des unités de valeurs relatives Cadratin (em), Pourcentage (%) pour
        définir les tailles de textes ;

    •   Évitez les unités fixes et non destinées au web Pixel (px,) Point (pt), .. ;

    •   Assurez-vous de la lisibilité de votre texte : les couleurs, les tailles,
        l’interlignage, les polices ...
Bonnes pratiques
display:none; accessible
•   Les lecteurs d’écrans autant que les navigateurs sont sensé respecter autant
    que possible les spécifications du W3C, donc évitez :

    •   text-indent:-9999em; le texte sera autant tronqué que sur un navigateur

    •   position:absolute; top:-9999em; le texte sera positionné de manière non
        naturelle par rapport au reste du document et entraine des bugs sur
        WindowsEyes

•   Utilisez display:none, ou supprimer les du documents quand il s’avère vraiment
    nécessaire de cacher des choses.

•   Sinon préférez position:absolute; left:-9999em;
    Vous assurerez ainsi une position naturelle dans le flux de la page tout en le
    cachant sans en tronquer le texte.
    Si vous développez des pages dans lesquels la langue se lit de droite à gauche
    préférez right:-9999em;
Bonnes pratiques
Filter et Expression MSIE


•   Évitez autant que possibles les filtres et les expressions, en réalité ce sont des
    moulinettes infames qui surcharge la mémoire du client en ré-exécutant
    l’expression à chaque action de l’utilisateur ... un mouvement de souris suffit.

•   Si vous ne pouvez pas les éviter, assurez-vous de cibler le bon navigateur, sachez
    qu’un star-hack : * html #foobar {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); }
    Sera insuffisant pour cibler IE 6, IE 7 en sera également affecté d’un point de
    vue performance même s’il n’est pas pris en compte visuellement.
    Pour évitez cela, combinez le star-hack à l’underscore-hack :
    * html #foobar { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); }
Merci.

Sources d’inspiration :
 - W3C
 - Clearleft
 - Alsacréations




                                © 2008 Yves Van Goethem
                             yves.vangoethem@gmail.com
                           Distribué sous licence MIT X11

More Related Content

What's hot

Trucs et astuces PHP et MySQL
Trucs et astuces PHP et MySQLTrucs et astuces PHP et MySQL
Trucs et astuces PHP et MySQLDamien Seguy
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPierre Faure
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPkemenaran
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Ghilas BELHADJ
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correctionInes Ouaz
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressChi Nacim
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPressChi Nacim
 
Cours php & Mysql - 5éme partie
Cours php & Mysql - 5éme partieCours php & Mysql - 5éme partie
Cours php & Mysql - 5éme partiekadzaki
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPressChi Nacim
 

What's hot (20)

Trucs et astuces PHP et MySQL
Trucs et astuces PHP et MySQLTrucs et astuces PHP et MySQL
Trucs et astuces PHP et MySQL
 
Php4 Mysql
Php4 MysqlPhp4 Mysql
Php4 Mysql
 
Php 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVCPhp 2 - Approfondissement MySQL, PDO et MVC
Php 2 - Approfondissement MySQL, PDO et MVC
 
Php
PhpPhp
Php
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
 
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
Création de Thème WordPress - Ghilas BELHADJ - Semaine du Web 2013
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
Html 5
Html 5Html 5
Html 5
 
Conversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPressConversion de template HTML en thème WordPress
Conversion de template HTML en thème WordPress
 
Création de themes WordPress
Création de themes WordPressCréation de themes WordPress
Création de themes WordPress
 
Cours php & Mysql - 5éme partie
Cours php & Mysql - 5éme partieCours php & Mysql - 5éme partie
Cours php & Mysql - 5éme partie
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPress
 
Javascript et JQuery
Javascript et JQueryJavascript et JQuery
Javascript et JQuery
 
Cours Php
Cours PhpCours Php
Cours Php
 
Fichier XML et PHP5
Fichier XML et PHP5Fichier XML et PHP5
Fichier XML et PHP5
 
Le client HTTP PHP5
Le client HTTP PHP5Le client HTTP PHP5
Le client HTTP PHP5
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
CSS 3
CSS 3CSS 3
CSS 3
 
Le client FTP de PHP5
Le client FTP de PHP5Le client FTP de PHP5
Le client FTP de PHP5
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 

Viewers also liked

Formation au HTML, CSS et éditeurs web
Formation au HTML, CSS et éditeurs webFormation au HTML, CSS et éditeurs web
Formation au HTML, CSS et éditeurs webSimaWay Simaway
 
IPW HTML course
IPW HTML courseIPW HTML course
IPW HTML courseVlad Posea
 
Ce mă fac când o să fiu mare - optiuni pentru o cariera in IT
Ce mă fac când o să fiu mare - optiuni pentru o cariera in ITCe mă fac când o să fiu mare - optiuni pentru o cariera in IT
Ce mă fac când o să fiu mare - optiuni pentru o cariera in ITVlad Posea
 
Programarea calculatoarelor c2
Programarea calculatoarelor c2Programarea calculatoarelor c2
Programarea calculatoarelor c2Vlad Posea
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTMLVlad Posea
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript FrenchVlad Posea
 
Usability and accessibility on the web
Usability and accessibility on the webUsability and accessibility on the web
Usability and accessibility on the webVlad Posea
 
Linked Open Data in Romania
Linked Open Data in RomaniaLinked Open Data in Romania
Linked Open Data in RomaniaVlad Posea
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSSVlad Posea
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Vlad Posea
 
utilisabilite et accessibilite au web
utilisabilite et accessibilite au webutilisabilite et accessibilite au web
utilisabilite et accessibilite au webVlad Posea
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francaisVlad Posea
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSSVlad Posea
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5Vlad Posea
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
Présentation html5
Présentation html5Présentation html5
Présentation html5Kénium
 

Viewers also liked (20)

Formation au HTML, CSS et éditeurs web
Formation au HTML, CSS et éditeurs webFormation au HTML, CSS et éditeurs web
Formation au HTML, CSS et éditeurs web
 
IPW HTML course
IPW HTML courseIPW HTML course
IPW HTML course
 
Ce mă fac când o să fiu mare - optiuni pentru o cariera in IT
Ce mă fac când o să fiu mare - optiuni pentru o cariera in ITCe mă fac când o să fiu mare - optiuni pentru o cariera in IT
Ce mă fac când o să fiu mare - optiuni pentru o cariera in IT
 
Programarea calculatoarelor c2
Programarea calculatoarelor c2Programarea calculatoarelor c2
Programarea calculatoarelor c2
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTML
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
Usability and accessibility on the web
Usability and accessibility on the webUsability and accessibility on the web
Usability and accessibility on the web
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
Linked Open Data in Romania
Linked Open Data in RomaniaLinked Open Data in Romania
Linked Open Data in Romania
 
IPW 3rd Course - CSS
IPW 3rd Course - CSSIPW 3rd Course - CSS
IPW 3rd Course - CSS
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1
 
utilisabilite et accessibilite au web
utilisabilite et accessibilite au webutilisabilite et accessibilite au web
utilisabilite et accessibilite au web
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSS
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
Css+html
Css+htmlCss+html
Css+html
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 

Similar to Beautiful CSS : Structurer, documenter, maintenir

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2Horacio Gonzalez
 
Performance et optimisation de PrestaShop
Performance et optimisation de PrestaShopPerformance et optimisation de PrestaShop
Performance et optimisation de PrestaShopPrestaShop
 
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Paris, France
 
ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)Nicolas Aguenot
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianKaelig Deloumeau-Prigent
 
Deliverance, la puissance de la gestion de contenu Plone appliquée aux thèmes...
Deliverance, la puissance de la gestion de contenu Plone appliquée aux thèmes...Deliverance, la puissance de la gestion de contenu Plone appliquée aux thèmes...
Deliverance, la puissance de la gestion de contenu Plone appliquée aux thèmes...Paris, France
 
Css maintenable - Morgane Hervé
Css maintenable - Morgane HervéCss maintenable - Morgane Hervé
Css maintenable - Morgane HervéWeb à Québec
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)Corinne Schillinger
 
Git ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versionGit ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versiongoldoraf
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs csspefringant
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web SémantiqueYounesOuladSayad1
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfEricKeita
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressDaniel Roch - SeoMix
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du FrontYannick Croissant
 
Les règles de développement Angular
Les règles de développement AngularLes règles de développement Angular
Les règles de développement AngularHéla Ben Khalfallah
 

Similar to Beautiful CSS : Structurer, documenter, maintenir (20)

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
Performance et optimisation de PrestaShop
Performance et optimisation de PrestaShopPerformance et optimisation de PrestaShop
Performance et optimisation de PrestaShop
 
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
 
Retour d'expérience sur PowerShell
Retour d'expérience sur PowerShellRetour d'expérience sur PowerShell
Retour d'expérience sur PowerShell
 
ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)
 
Faire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au GuardianFaire le pont entre designers et développeurs au Guardian
Faire le pont entre designers et développeurs au Guardian
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Deliverance, la puissance de la gestion de contenu Plone appliquée aux thèmes...
Deliverance, la puissance de la gestion de contenu Plone appliquée aux thèmes...Deliverance, la puissance de la gestion de contenu Plone appliquée aux thèmes...
Deliverance, la puissance de la gestion de contenu Plone appliquée aux thèmes...
 
js.pdf
js.pdfjs.pdf
js.pdf
 
Css maintenable - Morgane Hervé
Css maintenable - Morgane HervéCss maintenable - Morgane Hervé
Css maintenable - Morgane Hervé
 
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
LESS : moins de CSS, plus de fun ! (KiwiParty 2011)
 
Git ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de versionGit ou le renouveau du contrôle de version
Git ou le renouveau du contrôle de version
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
initiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdfinitiation-dvptWEB-ericacademy.pdf
initiation-dvptWEB-ericacademy.pdf
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Optimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
Les règles de développement Angular
Les règles de développement AngularLes règles de développement Angular
Les règles de développement Angular
 

More from Yves Van Goethem

CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsYves Van Goethem
 
CSS @font-face : Des polices personnalisées
CSS @font-face : Des polices personnaliséesCSS @font-face : Des polices personnalisées
CSS @font-face : Des polices personnaliséesYves Van Goethem
 

More from Yves Van Goethem (6)

Are We Playing Yet?
Are We Playing Yet?Are We Playing Yet?
Are We Playing Yet?
 
Tame The Mobile Web
Tame The Mobile WebTame The Mobile Web
Tame The Mobile Web
 
Dompter Le Web Mobile
Dompter Le Web MobileDompter Le Web Mobile
Dompter Le Web Mobile
 
CSS @font-face : Personalized fonts
CSS @font-face : Personalized fontsCSS @font-face : Personalized fonts
CSS @font-face : Personalized fonts
 
CSS @font-face : Des polices personnalisées
CSS @font-face : Des polices personnaliséesCSS @font-face : Des polices personnalisées
CSS @font-face : Des polices personnalisées
 
PNGHack 1.0 Presentation
PNGHack 1.0 PresentationPNGHack 1.0 Presentation
PNGHack 1.0 Presentation
 

Recently uploaded

Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleErol GIRAUDY
 
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapMaxime Huran 🌈
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311Erol GIRAUDY
 
The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)IES VE
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Infopole1
 
Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensErol GIRAUDY
 

Recently uploaded (6)

Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence Artificielle
 
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311
 
The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
 
Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examens
 

Beautiful CSS : Structurer, documenter, maintenir

  • 2. Petit rappel CSS : • Décrit la présentation de documents HTML, XML, XUL, ... • sélecteur { Bloc de règles propriété: valeur; }
  • 3. Structure (ou pas) #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} #TB_overlay { position:fixed; z-index:100; top:0px; left:0px; height:100%; width:100%; } * html #TB_overlay { position:absolute; height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } .TB_overlayMacFFBGHack {background: url(../img/skin/macFFBgHack.png) repeat;} .TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } #TB_window { position:fixed; background:#ffffff; z-index:102; color:#000000; display:none; border:4px solid #525252; text-align:left; top:50%; left:50%; } * html #TB_window { position:absolute; margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_window img#TB_Image { display:block; margin:15px 0 0 15px; border-right:1px solid #ccc; border:1px solid #666; } #TB_caption { height:25px; padding:7px 30px 10px 25px; float:left; } #TB_closeWindow { height:25px; padding:11px 25px 10px 0; float:right; } #TB_closeAjaxWindow { padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; } #TB_ajaxWindowTitle { float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB_title { background-color:#e8e8e8; height:27px; } #TB_ajaxContent { clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; } #TB_ajaxContent.TB_modal { padding:15px; } #TB_ajaxContent p { padding:5px 0px 5px 0px; } #TB_load { position:fixed; display:none; height:13px; width:208px; z-index:103; top:50%; left:50%; margin:-6px 0 0 -104px; } * html #TB_load { position:absolute; margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); }
  • 4. Structure (ou pas) Stop au carnage !
  • 5. Convention de dev Formatage : Le formatage du code consiste en son écriture aéré et homogène. • Une ligne ne doit pas dépasser 80 colonnes ; • Retour à la ligne : • A la fin de chaque bloc de règles ; • A la fin de chaque règle CSS, sauf si il en existe qu’une ; • Avant chaque nouveau groupe de bloc de règles ; • Tabulation : • une tabulation correspondant à 4 espaces devant chaque règle CSS • Espaces : • Peu être utilisé avant une valeur (ex : propriété: valeur)
  • 6. Convention de dev Nommage : • Ecrivez votre code et vos commentaires toujours en anglais ; • Utilisez slug plutôt que “lowerCamelCase” pour créer des ensembles de mots ; ex : boxType1 devient box-type-1 • Les caractères recommandés par le W3C sont de type alphanumérique, ainsi que le trait d’union, l’underscore ne fait pas partie des recommandations. • Nommez vos sélecteurs de manières sémantiques : ex : texteRougeGras devient warning-1 ex : blocSimpleShadow devient box-type-1 ex : blocRight devient box-contextual • Utilisez des mots clefs génériques : cols, col, inner, box, content, list, menu, footer, header ... inspirez vous de HTML 5
  • 7. Convention de dev Commentez : • Utilisez un en-tête de fichier qui décrit son contenu : /* --------------------------------------------------------------------------- CSS Document project: XYZ Inc. created: 2008-10-17 author: Yves Van Goethem email: yves.vangoethem@entreprise.com website: http://www.entreprise.com summary: GENERIC HEADER FOOTER BREADCRUMP CONTENT ... --------------------------------------------------------------------------- */
  • 8. Convention de dev Commentez : • Utilisez des en-têtes pour chaque catégorie définie dans “summary” (précédé par un retour de ligne en plus du dernier bloc de règles CSS) : /* =HEADER --------------------------------------------------------------------------- */ #header { border:1px solid #000; } /* =FOOTER --------------------------------------------------------------------------- */ #footer { border:2px solid red; }
  • 9. Convention de dev Commentez : • Expliquez l’utilisation de choses propriétaires, de hacks, de règles compliqués ... A l’aide de mots clefs et/ou de références : TRICKY, INFO, BUGGY ... body { font-size:72.75%; /* :INFO: 1em = 11px */ } .box-type-1 { float:left; margin:10px 20px; display:inline; /* :TRICKY: IE 6 double-margin bug */ } .box-type-2 { /* :TRICKY: Firefox 3 transparent background http://developer.mozilla.org/En/CSS/Color */ background:rgba(125, 125, 125, 0.5); }
  • 10. Structure de dev /* --------------------------------------------------------------------------- CSS Document project: XYZ Inc. created: 2008-10-17 author: Yves Van Goethem email: yves.vangoethem@entreprise.com website: http://www.entreprise.com summary: GENERIC HEADER --------------------------------------------------------------------------- */ /* =GENERIC --------------------------------------------------------------------------- */ body { font-size:68. 75%; /* :INFO: 1em = 11px */ } /* =HEADER --------------------------------------------------------------------------- */ #header { display:-moz-inline-box; /* :TRICKY: Gecko 1.8 inline-block */ display:inline-block; }
  • 11. Simplifie toi la vie ! • Toutes ces conventions permettent de définir un vrai modèle de travail, elles sont inspiré d’autres conventions de développement tel que Java, PHP, C, JavaScript, ... tout développeur pourra s’y retrouver. • Vous n’êtes pas seul, on bosse sur un marché international et notre métier est déjà assé incompris comme ça... Rappelez-vous ... CSS est destiné à faciliter la maintenance d’un site, d’où la nécessité d’avoir un code lisible, structuré, et donc accessible à tout développeur, peu importe son origine, son équipement, lieu de travail, ...
  • 12. Bonnes pratiques CSS reset Appliquez toujours un reset CSS avant de faire quoi que ce sois : * { margin:0; padding:0; vertical-align:baseline; line-height:1.35em; } Ciblez d’autres spécificités : a { color: green; } a img, fieldset, form { border:0; } ins, abbr, acronym { text-decoration:none; border:0; font-style:normal; }
  • 13. Bonnes pratiques Class génériques intrusives : • N’utilisez pas de class génériques intrusives de types : • clear, clearfix, spacer • floatLeft, floatRight • marginT10, paddingB10, border5px • bold, underline, leftArrow • ...
  • 14. Bonnes pratiques Imbriquation de fichiers (en prod) : • Préférez l’utilisation de media-queries dans votre code CSS, plutôt que de faire plusieurs appels dans votre code HTML. Améliorez la maintenance en séparant d’avantage la CSS de l’HTML et les performances en faisant moins de requêtes. <link rel=quot;stylesheetquot; href=quot;css/basic.cssquot; type=quot;text/cssquot; charset=quot;utf-8quot; /> <link rel=quot;stylesheetquot; href=quot;css/print.cssquot; type=quot;text/cssquot; media=”print” charset=quot;utf-8quot; /> devient 1 seul fichier CSS avec : @media print { ... } @media screen { ... }
  • 15. Bonnes pratiques Remédiez à la “Classitis” <h2 class=”ttlNews”>La fin des happy hours</h2> <p class=”blocNews”>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <span class=”blocNews”><a href=”#” class=”linkNews”>En savoir plus</a></span> Devient : <div class=”box-news-1”> <h2>La fin des happy hours</h2> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <span><a href=”#”>En savoir plus</a></span> </div>
  • 16. Bonnes pratiques Ne déstructurez par le code en pensant le structurer ... • Définissez tout à un endroit, ça évitera aux développeurs d’ouvrir 3 fichiers pour modifier un même sélecteur. L’erreur la plus commune est de se baser sur plusieurs fichiers : layout.css, typography.css, color.css ... Ce qui mène souvent à des surchages de règles. • Par ailleurs, écrivez vos hacks de manière à ce qu’ils sautent aux yeux, utilisez les commentaires d’aides qu’on a vu tout à l’heure ou écrivez les entièrement sur une ligne, ne les externalisez pas dans d’autres fichiers. • Suivez les recommendations de développement “Zen”, développez de manière à faciliter la dégradation sur les navigateurs d’anciennes générations et l’évolution sur les navigateurs modernes.
  • 17. Bonnes pratiques Utilisez les sprites CSS en sachant que : • CSS est destiné à définir la présentation, évitez les techniques de remplacement CSS, le contenu n’est pas sensé se retrouver dans un code CSS, cela entraine des problèmes d’accessibilités : • Impossible de modifier les tailles de polices ; • Impossible d’imprimer le contenu ; • Illisible pour les lecteurs d’écrans ; • Tout cela est également le câs pour sIFR • Si le contenu de votre bloc dépasse ses dimensions, il risque de faire apparaitre d’autres parties du fichier qui sert de Sprite
  • 18. Bonnes pratiques Typographie • Concevez des pages accessibles, peu importe l’équipement et les méthodes de navigation des utilisateurs, pour ce faire : • Utilisez des unités de valeurs relatives Cadratin (em), Pourcentage (%) pour définir les tailles de textes ; • Évitez les unités fixes et non destinées au web Pixel (px,) Point (pt), .. ; • Assurez-vous de la lisibilité de votre texte : les couleurs, les tailles, l’interlignage, les polices ...
  • 19. Bonnes pratiques display:none; accessible • Les lecteurs d’écrans autant que les navigateurs sont sensé respecter autant que possible les spécifications du W3C, donc évitez : • text-indent:-9999em; le texte sera autant tronqué que sur un navigateur • position:absolute; top:-9999em; le texte sera positionné de manière non naturelle par rapport au reste du document et entraine des bugs sur WindowsEyes • Utilisez display:none, ou supprimer les du documents quand il s’avère vraiment nécessaire de cacher des choses. • Sinon préférez position:absolute; left:-9999em; Vous assurerez ainsi une position naturelle dans le flux de la page tout en le cachant sans en tronquer le texte. Si vous développez des pages dans lesquels la langue se lit de droite à gauche préférez right:-9999em;
  • 20. Bonnes pratiques Filter et Expression MSIE • Évitez autant que possibles les filtres et les expressions, en réalité ce sont des moulinettes infames qui surcharge la mémoire du client en ré-exécutant l’expression à chaque action de l’utilisateur ... un mouvement de souris suffit. • Si vous ne pouvez pas les éviter, assurez-vous de cibler le bon navigateur, sachez qu’un star-hack : * html #foobar {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); } Sera insuffisant pour cibler IE 6, IE 7 en sera également affecté d’un point de vue performance même s’il n’est pas pris en compte visuellement. Pour évitez cela, combinez le star-hack à l’underscore-hack : * html #foobar { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...); }
  • 21. Merci. Sources d’inspiration : - W3C - Clearleft - Alsacréations © 2008 Yves Van Goethem yves.vangoethem@gmail.com Distribué sous licence MIT X11