BDX.IO - Maîtriser son style CSS

BDX.IO - Maîtriser son style CSS

C8ca9472c8318285fdbc31daa05cf698?s=128

Pierre Renaudin

October 17, 2014
Tweet

Transcript

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

  2. None
  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
  4. FAT Bootstrap Medium Twitter MDO Bootstrap Github HARRY ROBERTS CSS

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

  6. None
  7. DU CSS VOUS DITES ? ça donne quoi après plusieurs

    itérations et plusieurs personnes ayant travaillé dessus ?
  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
  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 {}
  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 { ... }
  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; }
  12. HTML // Pas bien ul.user-list li span a:hover { color:

    red; } // Bien .user-list a:hover { color: red; } Sélecteurs plus direct
  13. None
  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.
  15. SASS Votre meilleur ami au quotidien

  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
  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 ; )
  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
  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
  20. None
  21. OK FRAMEWORK alors pour aller plus vite et éviter de

    partir à la hache, on choisit un framework.
  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
  23. Foundation Normalize Composants Utilitaires + Structure Bootstrap Normalize Composants Utilitaires

    + Styles Inuit.css Picnic.css Knacss …
  24. None
  25. HTML <div class="user-profile panel panel-default text-center”> <div class="user-avatar user-avatar-large"> <img

    src="../assets/images/avatar.png"/> </div> <div class="panel-body"> <h2><b>MC Hammer</b></h2> <ul class="user-informations small text-left"> . . . </ul> </div> </div> HTML Utilisation des helpers et composants du framework
  26. HTML <div class="user-profile panel panel-default text-center”> <div class="user-avatar user-avatar-large"> <img

    src="../assets/images/avatar.png"/> </div> <div class="panel-body"> <h2><b>MC Hammer</b></h2> <ul class="user-informations small text-left"> . . . </ul> </div> </div> HTML Ajout des classes spécifiques aux composants fonctionnels
  27. Ne pas faire une indigestion • Importer certaines portions du

    framework • Initialiser les variables du framework • Étendre le framework plutôt que le surcharger
  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
  29. None
  30. ORGANISONS NOUS Maintenant qu’on a pleins d’astuces, on fait des

    composants pour les réutiliser
  31. Composants BEM • BEM pour BLOCK - ELEMENT - MODIFIER

    • Chaque classe CSS à une responsabilité unique • Exemple : .message-profile--small
  32. None
  33. HTML <article class="message"> <header class="message-header"> <img class="user-avatar user-avatar--small” src="{$src}" alt="{$alt}">

    ... </header> <div class="message-body"> ... </div> </article> Chaque classe CSS à une responsabilité unique
  34. Redondance dans le HTML Pas dans le CSS

  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
  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
  37. HTML .u-pull-left { float: left !important; } .u-text-left { text-align:

    left !important; } u-utilities : pour faire un utilitaire
  38. HTML <div class="panel-body"> <h2 class="js-navigate">MC Hammer</h2> <ul class="user-informations u-small"> .

    . . </ul> </div> .js-property : pour une classe réservée au javascript
  39. HTML <div class="user col-4"> <div class="user-profile panel is-open“> <div class="user-avatar

    user-avatar--large"> <img src="../assets/images/avatar.png"/> </div> <div class="panel-body"> <h2 class="js-navigate">MC Hammer</h2> <ul class="user-informations u-small"> . . . </ul> </div> </div> </div> .block-element--modifier : pour spécifier une variation
  40. HTML <div class="user col-4"> <div class="user-profile panel is-open“> <div class="user-avatar

    user-avatar--large"> <img src="../assets/images/avatar.png"/> </div> <div class="panel-body"> <h2 class="js-navigate">MC Hammer</h2> <ul class="user-informations u-small"> . . . </ul> </div> </div> </div> is-modifier : pour modifier un block dans un certain état
  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…
  42. None
  43. STYLEGUIDE Hologram pour générer ses guides de styles

  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
  45. None
  46. HTML /*doc --- title: Active / Disabled name: c-active-disabled category:

    Layout - Buttons --- ```html_example <p> <button type="button" class="btn btn-primary btn-lg active”> Primary button </button> <button type="button" class="btn btn-default btn-lg active”> Button</button> </p> <p> <button type="button" class="btn btn-lg btn-primary" disabled=“disabled"> Primary button </button> <button type="button" class="btn btn-default btn-lg" disabled=“disabled"> Button </button> </p> ``` */
  47. None
  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