BDX.IO - Maîtriser son style CSS

Transcript

1. MAÎTRISER
   SON STYLE
   CSS
   Pierre Renaudin
   @pierrerenaudin
   

   View Slide

2. View Slide

3. POURQUOI S'OCCUPER
   DE SON CSS ?
   - conserver des feuilles de style maintenable
   - avoir un code transparent, propre et lisible
   - conserver des feuilles de style scalable
   

   View Slide

4. FAT
   Bootstrap
   Medium
   Twitter
   MDO
   Bootstrap
   Github
   HARRY ROBERTS
   CSS Guidelines
   Inuit.css
   

   View Slide

5. Pour suivre ou
   continuer
   http://bit.ly/manage-css-example
   

   View Slide

6. View Slide

7. DU CSS VOUS DITES ?
   ça donne quoi après plusieurs itérations et plusieurs
   personnes ayant travaillé dessus ?
   

   View Slide

8. CSS
   // Pas bien
   .Timeline > .container > .header {
   background-color: rgb(240,240,240);
   margin: -15px -15px 15px -15px;
   padding: 15px;
   border-bottom: 1px solid #DDDDDD;
   }
   // Pas bien
   #Timeline .message .header .avatar img {
   width: 32px;
   height: 32px;
   border-radius: 3px;
   }
   Exemple de CSS après moults reprises
   

   View Slide

9. CSS
   Noms de classes en minuscules, séparés par des tirets
   Bannir les IDs et les !important
   // Pas bien
   .userProfile {}
   .postheader {}
   #top_navigation {}
   // Bien
   .user-profile {}
   .post-header {}
   .top-navigation {}
   

   View Slide

10. CSS
    Séparer chaque déclaration par un espace
    Séparer les sélecteurs
    // Pas bien
    .content, .content-edit {
    ...
    }
    .content-critical {
    ...
    }
    // Bien
    .content,
    .content-edit {
    ...
    }
    .content-critical {
    ...
    }
    

    View Slide

11. CSS
    Séparer les composants fonctionnels et ceux graphiques
    // Pas bien
    .button {
    margin-top: 40px;
    background-color: blue;
    padding: 6px 12px;
    }
    // Bien
    .button {
    background-color: blue;
    padding: 6px 12px;
    }
    .user-button {
    margin-top: 40px;
    }
    

    View Slide

12. HTML
    // Pas bien
    ul.user-list li span a:hover { color: red; }
    // Bien
    .user-list a:hover { color: red; }
    Sélecteurs plus direct
    

    View Slide

13. View Slide

14. CSS ? ON VEUT MIEUX
    Oui, désolé CSS, mais on veut essayer quelque chose de
    différent. On t’oublie pas, t’inquiète pas.
    

    View Slide

15. SASS
    Votre meilleur ami au quotidien
    

    View Slide

16. SASS CSS
    $gray: #DDDDDD
    $padding-default: 15px
    $avatar-size: 90px
    $border-radius-base: 3px
    $font-size-small: 13px
    .user-container
    border: 1px solid $gray
    padding: $padding-default
    border-radius: $border-radius-base*2
    .user-container {
    border: 1px solid #DDDDDD;
    padding: 15px;
    border-radius: 6px;
    }
    Définition de variables et opérations
    

    View Slide

17. SASS CSS
    .user
    .avatar
    margin-top: - ($avatar-size/2)
    img
    width: $avatar-size
    height: $avatar-size
    .user .avatar{
    margin-top: -45px;
    }
    .user img {
    width: 90px;
    height: 90px;
    }
    Indentation significative ( fini {} et ; )
    

    View Slide

18. SASS
    $gray: #DDDDDD
    $padding-default: 15px
    $avatar-size: 90px
    $border-radius-base: 3px
    $font-size-small: 13px
    .user
    .container
    border: 1px solid $gray
    padding: $padding-default
    border-radius: $border-radius-base
    .avatar img
    width: $avatar-size
    height: $avatar-size
    margin-top: - ($avatar-size/2)
    border-radius: $border-radius-base
    +box-shadow(0, 1px, 1px, rgba(0,0,0,.2))
    .informations
    font-size: $font-size-small
    Exemple complet
    

    View Slide

19. SASS
    sass
    ├── style.sass
    ├── _mixins.sass
    ├── _variables.sass
    ├── base
    │ ├── _colors.sass
    │ ├── _typo.sass
    │ └── _utilities.sass
    ├── components
    │ ├── _avatars.sass
    │ ├── _badges.sass
    │ └── _buttons.sass
    └── pages
    ├── _form.sass
    ├── _header.sass
    ├── _placeholder.sass
    └── _separator.sass
    Découpage en partials des ses feuilles de style
    

    View Slide

20. View Slide

21. OK FRAMEWORK
    alors pour aller plus vite et éviter de partir à la hache, on
    choisit un framework.
    

    View Slide

22. Pourquoi un framework ?
    • Rapidité au démarrage
    • Respect des normes qu’il impose
    • Normalisation des propriétés de base
    • Nombreux utilitaires et composants inclus
    

    View Slide

23. Foundation
    Normalize
    Composants
    Utilitaires
    + Structure
    Bootstrap
    Normalize
    Composants
    Utilitaires
    + Styles
    Inuit.css
    Picnic.css
    Knacss
    …
    

    View Slide

24. View Slide

25. HTML
    
    
    
    
    MC Hammer
    
    . . .
    
    
    
    HTML
    Utilisation des helpers et composants du framework
    

    View Slide

26. HTML
    
    
    
    
    MC Hammer
    
    . . .
    
    
    
    HTML
    Ajout des classes spécifiques aux composants fonctionnels
    

    View Slide

27. Ne pas faire une indigestion
    • Importer certaines portions du framework
    • Initialiser les variables du framework
    • Étendre le framework plutôt que le surcharger
    

    View Slide

28. HTML
    $brand-primary: $blue
    $font-family-sans-serif: 'Source Sans Pro'
    $special-headings-font-family: 'Raleway'
    $border-radius-base: 4px
    $border-radius-large: 6px
    $border-radius-small: 3px
    // Core CSS
    @import bootstrap/scaffolding
    @import bootstrap/type
    @import bootstrap/tables
    @import bootstrap/forms
    @import bootstrap/buttons
    Définition des variables de Bootstrap et import partiel
    

    View Slide

29. View Slide

30. ORGANISONS NOUS
    Maintenant qu’on a pleins d’astuces, on fait des composants
    pour les réutiliser
    

    View Slide

31. Composants BEM
    • BEM pour BLOCK - ELEMENT - MODIFIER
    • Chaque classe CSS à une responsabilité unique
    • Exemple : .message-profile--small
    

    View Slide

32. View Slide

33. HTML
    
    
    
    ...
    
    
    ...
    
    
    Chaque classe CSS à une responsabilité unique
    

    View Slide

34. Redondance dans le HTML
    Pas dans le CSS
    

    View Slide

35. Single responsibility principle
    • Une classe pour le style graphique
    • Une classe pour identifier un bloc fonctionnel
    • Une classe pour modifier ou nuancer une autre
    

    View Slide

36. Sélecteurs spécifiques
    • u-utilities : pour faire un utilitaire
    • is-modifier : pour modifier un block dans un
    certain état
    • .block-element--modifier : pour spécifier une
    variation
    • .js-property : pour une classe réservée au
    javascript
    

    View Slide

37. HTML
    .u-pull-left {
    float: left !important;
    }
    .u-text-left {
    text-align: left !important;
    }
    u-utilities : pour faire un utilitaire
    

    View Slide

38. HTML
    
    MC Hammer
    
    . . .
    
    
    .js-property : pour une classe réservée au javascript
    

    View Slide

39. HTML
    
    
    
    
    
    MC Hammer
    
    . . .
    
    
    
    
    .block-element--modifier : pour spécifier une variation
    

    View Slide

40. HTML
    
    
    
    
    
    MC Hammer
    
    . . .
    
    
    
    
    is-modifier : pour modifier un block dans un certain état
    

    View Slide

41. SASS
    p
    margin: 0 0 $margin-treshold 0
    .panel
    border: 1px solid rgba(0,0,0,.15)
    border-radius: $border-radius-base
    background-color: $color-white
    .u-small
    font-size: 85%
    .user-profile .user-avatar
    margin-top: -( $size-avatar-large / 2 )
    .user-avatar--medium img
    +square($size-avatar-medium)
    border-radius: $border-radius-base
    .user-avatar--large img
    +square($size-avatar-large)
    border-radius: $border-radius-large
    Finally…
    

    View Slide

42. View Slide

43. STYLEGUIDE
    Hologram pour générer ses guides de styles
    

    View Slide

44. Hologram + Cortana
    • Générer des guides de styles en déclarant les
    composants
    • Vérifier la mise en forme des modifications faites à un
    framework
    • Recherche et documentation disponible pour le CSS
    

    View Slide

45. View Slide

46. HTML
    /*doc
    ---
    title: Active / Disabled
    name: c-active-disabled
    category: Layout - Buttons
    ---
    ```html_example
    
    
    Primary button
    
    
    Button
    
    
    ```
    */
    

    View Slide

47. View Slide

48. The End
    Twitter : @pierrerenaudin
    Support : http://bit.ly/manage-css-example
    https://prenaudin.github.io/styleguide_css/styleguide
    Pierre Renaudin
    BDX.IO - 17 octobre 2014
    

    View Slide